{"id":1423,"date":"2019-05-25T17:26:50","date_gmt":"2019-05-25T17:26:50","guid":{"rendered":"https:\/\/webdevtrick.com\/?p=1423"},"modified":"2019-05-25T17:26:50","modified_gmt":"2019-05-25T17:26:50","slug":"javascript-scroll-to-top","status":"publish","type":"post","link":"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/","title":{"rendered":"JavaScript Scroll To Top Feature | HTML CSS JavaScript Go To Top"},"content":{"rendered":"<p><strong>How to create a button on the webpage to go back top? Solution: JavaScript Scroll To Top Feature, HTML CSS JavaScript Go To Top button.<\/strong><\/p>\n<p>Nowadays every blog and websites have a sperate button for <strong>going back to the top<\/strong> of the webpage. When we read or watch content on website then we start <strong>scrolling<\/strong> down to see more, but many times we want to go <strong>back on the upper side<\/strong>. For going back to the top of the webpage we have to <strong>scroll up<\/strong>, but most sites use a <strong>button to go back to top<\/strong> on a <strong>single click<\/strong>.<\/p>\n<p>That is a pretty good feature and save some seconds. Now mostly WordPress theme comes pre-built with this feature. Now we don&#8217;t have to scroll up to reach the top of the webpage, just single click on a <span><a href=\"https:\/\/webdevtrick.com\/toggle-button-css\/\" target=\"_blank\" rel=\"noopener noreferrer\">button<\/a><\/span> you are done.\u00a0 Mostly these scroll to the top program made with jQuery, but I had created this in <strong>pure JavaScript<\/strong>.<\/p>\n<p>So, Today I am sharing <strong>JavaScript Scroll To Top Button or Feature<\/strong>. You can call this a <strong>Pure HTML CSS &amp; JavaScript Go To Top function<\/strong>, without any library. Basically, the whole program is based on JavaScript <code>scrollTop<\/code> command. And the button is fully styled in <span><a href=\"https:\/\/webdevtrick.com\/web-design\/css\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS<\/a><\/span>.<\/p>\n<p>Now if you are thinking about how this <strong>JavaScript scrollTop<\/strong> program actually is? then see the <strong>preview<\/strong> given below.<\/p>\n<h3>Preview Of HTML CSS JavaScript Go To Top<\/h3>\n<p>See this video preview to getting an idea of how this program looks like.<\/p>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-1423-1\" width=\"640\" height=\"319\" loop autoplay preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/go-to-top-scroll.mp4?_=1\" \/><a href=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/go-to-top-scroll.mp4\">https:\/\/webdevtrick.com\/wp-content\/uploads\/go-to-top-scroll.mp4<\/a><\/video><\/div>\n<p>Now you can see this program visually. If you like this program then get the <strong>source code<\/strong> of its.<\/p>\n<p><span style=\"font-size: 14pt;\">You May Also Like:<\/span><\/p>\n<ul>\n \t<span><\/p>\n<li><a href=\"https:\/\/webdevtrick.com\/javascript-reveal-blur-image-part\/\" target=\"_blank\" rel=\"noopener noreferrer\">Reveal a Part Of Blurred Image<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/text-animate-on-scroll\/\" target=\"_blank\" rel=\"noopener noreferrer\">Text Animate &amp; Divide On Scroll JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/error-404-page-with-html-css-javascript\/\" target=\"_blank\" rel=\"noopener noreferrer\">Animated Error 404 Page With JS<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/javascript-keycode-detect\/\" target=\"_blank\" rel=\"noopener noreferrer\">JavaScript Detect Key &amp; Key Code<\/a><\/li>\n<p><\/span>\n<\/ul>\n<h2>JavaScript Scroll To Top or scrollTop Source Code<\/h2>\n<p>Before <strong>sharing source code<\/strong>, let&#8217;s talk about this program. As you know this is a pure JavaScript program, not used any library. For creating this <strong>HTML CSS JavaScript<\/strong> Scroll To Top feature, I used JavaScript&#8217;s <code>scrollTop<\/code> ( get <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/scrollTop\" target=\"_blank\" rel=\"noopener noreferrer\">info<\/a> )command. I had set the limit, when y reached over 500 value then the button will appear.<\/p>\n<p>For creating this program you have to create 3 files. First for HTML, second for CSS, and third for JavaScript. Follow the steps to creating this <strong>program<\/strong> without any error.<\/p>\n<p><span style=\"font-size: 14pt;\">index.html<\/span><\/p>\n<p>Create an HTML file named &#8216;<strong><em>index.html<\/em><\/strong>&#8216; and put these codes given below.<\/p>\n<pre class=\"lang:default decode:true\">&lt;!DOCTYPE html&gt;\r\n&lt;!-- code by webdevtrick ( https:\/\/webdevtrick.com) --&gt;\r\n&lt;html&gt;\r\n\r\n&lt;head&gt;\r\n  &lt;meta charset=\"UTF-8\"&gt;\r\n  &lt;title&gt;JavaScript Go to top | Webevtrick.com&lt;\/title&gt;\r\n  &lt;link rel=\"stylesheet\" href=\"style.css\"&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\t\r\n  &lt;button class=\"gototop\"&gt;&lt;\/button&gt;\r\n\r\n\t&lt;div&gt;Website Terms and Conditions of Use\r\nTerms\r\nBy accessing this website, you are agreeing to be bound by these website Terms of Use, all suitable regulations and also policies, as well as agree that you are in charge of conformity with any applicable local legislation. If you do not agree with any of these terms, you are forbidden from using or accessing this website. The products had on this website are protected by applicable copyright and also trademark law.&lt;br&gt;&lt;br&gt;\r\nUsage License&lt;br&gt;\r\nAuthorization is given to briefly download and install one copy of the products ( information or software application) on WebDevTrick\u2019s website for an individual, non-commercial temporal watching only. This is the give of a license, not a transfer of title, as well as under this license you might not:&lt;br&gt;\r\nModify or duplicate the materials;&lt;br&gt;\r\nMake use of the materials for any commercial objective, or for any public display (business or non-commercial).&lt;br&gt;\r\nAttempt to decompile or turn around designer any software application contained on WebDevTrick\u2019s website.&lt;br&gt;\r\nRemove any copyright or various other exclusive symbols from the materials; or.&lt;br&gt;\r\nMove the materials to an additional person or \u201cmirror\u201d the products on any other web server.&lt;br&gt;\r\nThis license shall instantly end if you violate any one of these restrictions as well as could be terminated by WebDevTrick at any moment. After terminating your viewing of these materials or upon the termination of this license, you should damage any downloaded and install products in your possession whether in electronic or published layout.&lt;br&gt;&lt;br&gt;\r\nDisclaimer.&lt;br&gt;\r\nThe materials on WebDevTrick\u2019s web site are offered \u201cas is\u201d. WebDevTrick makes no guarantees, shared or indicated, and thus disclaims and also negates all other service warranties, including without limitation, implied service warranties or conditions of merchantability, health and fitness for a specific purpose, or non-infringement of intellectual property or various other infraction of legal rights. Additionally, WebDevTrick does not warrant or make any type of representations concerning the accuracy, likely outcomes, or reliability of using the materials on its Internet internet site or otherwise connecting to such materials or on any kind of sites linked to this website.&lt;br&gt;&lt;br&gt;\r\nLimitations.&lt;br&gt;\r\nIn no event will WebDevTrick or its distributors be responsible for any kind of problems (including, without limitation, problems for loss of data or profit, or due to business disturbance,) developing out of the use or lack of ability to utilize the products on WebDevTrick\u2019s Internet site, even if WebDevTrick or a WebDevTrick authorized agent has actually been alerted by mouth or handwritten of the opportunity of such damages. Because some jurisdictions do not permit limitations on suggested guarantees, or restrictions of responsibility for substantial or subordinate damages, these limitations could not apply to you.&lt;br&gt;&lt;br&gt;\r\nAlterations as well as Errata.&lt;br&gt;\r\nThe materials appearing on WebDevTrick\u2019s website can include technological, typographical, or photo errors. WebDevTrick does not require that any one of the products on its web site are precise, total, or current. WebDevTrick could make changes to the products had on its internet site at any time without notice. WebDevTrickdoes not, nevertheless, make any kind of commitment to upgrade the materials.&lt;br&gt;&lt;br&gt;\r\nLinks.&lt;br&gt;\r\nWebDevTrick has actually not examined all the sites connected to its Internet website and also is not responsible for the contents of any type of such linked site. The addition of any link does not indicate recommendation by WebDevTrick of the website. Use any type of such linked website goes to the customer\u2019s very own danger.&lt;br&gt;&lt;br&gt;\r\nSite Terms of Use Modifications.&lt;br&gt;\r\nWebDevTrick might revise these regards to use for its web site at any time without notification. Using this website you are accepting be bound by the after that current version of these Terms and Conditions of Use.&lt;br&gt;&lt;br&gt;\r\nGoverning Law.&lt;br&gt;\r\nAny kind of claim relating to WebDevTrick\u2019s web site will be controlled by the legislations of the State of Virginia without regard to its conflict of legislation stipulations.&lt;br&gt;\r\nGeneral Conditions appropriate to Use a Website.&lt;br&gt;&lt;br&gt;\r\nPrivacy Policy.&lt;br&gt;\r\nYour privacy is crucial to us. Accordingly, we have actually established this Policy in order for you to comprehend how we accumulate, utilize, communicate as well as disclose and also use individual information. The adhering to details our privacy policy.&lt;br&gt;\r\nBefore or at the time of accumulating personal information, we will determine the objectives for which information is being collected.&lt;br&gt;\r\nWe will certainly collect as well as use personal information only with the goal of meeting those functions specified by us and also for other suitable objectives, unless we get the permission of the specific concerned or as needed by regulation.&lt;br&gt;\r\nWe will just retain individual information as long as essential for the satisfaction of those functions.&lt;br&gt;\r\nWe will accumulate individual information by lawful and also reasonable means and, where appropriate, with the understanding or consent of the private concerned.&lt;br&gt;\r\nIndividual data need to pertain to the purposes for which it is to be made use of, and also, to the degree needed for those purposes, should be precise, complete, and up-to-date.&lt;br&gt;\r\nWe will certainly protect individual information by sensible security safeguards against loss or theft, as well as unauthorized accessibility, disclosure, duplicating, use or alteration.&lt;br&gt;\r\nWe will make easily offered to customers information about our plans and techniques associating with the monitoring of individual information.&lt;br&gt;\r\nWe are committed to performing our business in accordance with these concepts in order to guarantee that the confidentiality of individual information is safeguarded and also maintained.&lt;br&gt;\r\n\t&lt;\/div&gt;\r\n    &lt;script  src=\"function.js\"&gt;&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><span style=\"font-size: 14pt;\">style.css<\/span><\/p>\n<p>Now create a CSS file named &#8216;<strong><em>style.css<\/em><\/strong>&#8216; and put these codes.<\/p>\n<pre class=\"lang:css decode:true \" title=\"style.css\">\/** code by webdevtrick ( https:\/\/webdevtrick.com) **\/\r\nbody{\r\n  padding: 20px 15%;\r\n  font-family: roboto;\r\n  font-size: 20px;\r\n  background-color: #202020;\r\n  color: #eee;\r\n  line-height: 33px;\r\n  position: relative;\r\n}\r\n\r\n.gototop{\r\n  position: fixed;\r\n  display: block;\r\n  box-sizing: border-box;\r\n  height: 50px;\r\n  width: 50px;\r\n  border: none;\r\n  background-color: #FD3437;\r\n  border-radius: 3px;\r\n  bottom: 50px;\r\n  right: 50px;\r\n  margin-right: -30px;\r\n  outline: none;\r\n  opacity: 0;\r\n  transition: opacity .3s ease, margin-right .5s ease-out;\r\n}\r\n\r\n.visible{\r\n  transition: opacity .3s ease, margin-right .5s ease-out;\r\n  margin-right: 0px;\r\n  opacity: .6;\r\n}\r\n\r\n.gototop::before, .gototop::after{\r\n  content: '';\r\n  position: absolute;\r\n  height: 18px;\r\n  width: 2px;\r\n  background-color: #fff;\r\n  top: 16px;\r\n}\r\n.gototop::before{\r\n  left: 18px;\r\n  transform: rotate(45deg);\r\n}\r\n.gototop::after{\r\n  right: 18px;\r\n  transform: rotate(-45deg);\r\n}<\/pre>\n<p><span style=\"font-size: 14pt;\">function.js<\/span><\/p>\n<p>The final step, Create a JS file named &#8216;<strong><em>function.js<\/em><\/strong>&#8216;\u00a0 and the codes given here.<\/p>\n<pre class=\"lang:js decode:true \" title=\"function.js\">\/** code by webdevtrick ( https:\/\/webdevtrick.com) **\/\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n    let gototop = document.querySelector('.gototop');\r\n    let body = document.documentElement;\r\n\r\n    window.addEventListener('scroll', check);\r\n\r\n    function check() {\r\n        pageYOffset &gt;= 500 &amp;&amp; gototop.classList.add('visible');\r\n        pageYOffset &lt; 500 &amp;&amp; gototop.classList.remove('visible');\r\n    }\r\n\r\n\r\n    gototop.onclick = function() {\r\n        animate({\r\n            duration: 700,\r\n            timing: gogototopEaseOut,\r\n            draw: progress =&gt;\r\n                body.scrollTop = (body.scrollTop * (1 - progress \/ 7))\r\n        });\r\n    }\r\n\r\n    let circ = timeFraction =&gt;\r\n        1 - Math.sin(Math.acos(timeFraction &gt; 1 ? timeFraction = 1 : timeFraction));\r\n\r\n    let makeEaseOut = timing =&gt; timeFraction =&gt; 1 - timing(1 - timeFraction);\r\n    let gogototopEaseOut = makeEaseOut(circ);\r\n});\r\n\r\nfunction animate(options) {\r\n    let start = performance.now();\r\n\r\n    requestAnimationFrame(function animate(time) {\r\n        let timeFraction = (time - start) \/ options.duration;\r\n        timeFraction &gt; 1 &amp;&amp; (timeFraction = 1);\r\n\r\n        let progress = options.timing(timeFraction)\r\n\r\n        options.draw(progress);\r\n        timeFraction &lt; 1 &amp;&amp; requestAnimationFrame(animate);\r\n    });\r\n}<\/pre>\n<p>That&#8217;s It. Now you have successfully created JavaScript Scroll To Top Feature or scrollTop. In other words, HTML CSS JavaScript Go To Top button. If you have any doubt or question comment down below.<\/p>\n<p><span style=\"font-family: impact, sans-serif;\">Thanks For Visiting, Keep Visiting.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to create a button on the webpage to go back top? Solution: JavaScript Scroll To Top Feature, HTML CSS JavaScript Go To Top button. Nowadays every blog and websites have a sperate button for going back to the top of the webpage. When we read or watch content on website then we start scrolling [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1425,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[43,42,46,41],"tags":[74,155,68,60,199,67],"class_list":["post-1423","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-html","category-javascript","category-web-development","tag-css-animation","tag-html-and-css","tag-html-source-code","tag-javascript-tutorial","tag-scrolltop","tag-source-code"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>JavaScript Scroll To Top Feature | HTML CSS JavaScript Go To Top<\/title>\n<meta name=\"description\" content=\"Wantto create a button on the webpage to go back top? Get this JavaScript Scroll To Top Feature, with JavaScript scrollTop command. Get Source Code of its.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Scroll To Top Feature | HTML CSS JavaScript Go To Top\" \/>\n<meta property=\"og:description\" content=\"Wantto create a button on the webpage to go back top? Get this JavaScript Scroll To Top Feature, with JavaScript scrollTop command. Get Source Code of its.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Dev Trick\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webdevtrick\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-25T17:26:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/javascript-scroll-to-top.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"629\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"shaan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"shaan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/\"},\"author\":{\"name\":\"shaan\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3\"},\"headline\":\"JavaScript Scroll To Top Feature | HTML CSS JavaScript Go To Top\",\"datePublished\":\"2019-05-25T17:26:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/\"},\"wordCount\":500,\"commentCount\":11,\"publisher\":{\"@id\":\"https:\/\/webdevtrick.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/javascript-scroll-to-top.jpg\",\"keywords\":[\"css animation\",\"html and css\",\"html source code\",\"javascript tutorial\",\"scrolltop\",\"source code\"],\"articleSection\":[\"CSS\",\"HTML\",\"JavaScript\",\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/\",\"url\":\"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/\",\"name\":\"JavaScript Scroll To Top Feature | HTML CSS JavaScript Go To Top\",\"isPartOf\":{\"@id\":\"https:\/\/webdevtrick.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/javascript-scroll-to-top.jpg\",\"datePublished\":\"2019-05-25T17:26:50+00:00\",\"description\":\"Wantto create a button on the webpage to go back top? Get this JavaScript Scroll To Top Feature, with JavaScript scrollTop command. Get Source Code of its.\",\"breadcrumb\":{\"@id\":\"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/#primaryimage\",\"url\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/javascript-scroll-to-top.jpg\",\"contentUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/javascript-scroll-to-top.jpg\",\"width\":1200,\"height\":629,\"caption\":\"javascript scroll to top\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webdevtrick.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Scroll To Top Feature | HTML CSS JavaScript Go To Top\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webdevtrick.com\/#website\",\"url\":\"https:\/\/webdevtrick.com\/\",\"name\":\"Web Dev Trick\",\"description\":\"HTML5, CSS3, JS, PHP Source Code &amp; Tutorial\",\"publisher\":{\"@id\":\"https:\/\/webdevtrick.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webdevtrick.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webdevtrick.com\/#organization\",\"name\":\"Web Dev Trick\",\"url\":\"https:\/\/webdevtrick.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png\",\"contentUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png\",\"width\":512,\"height\":512,\"caption\":\"Web Dev Trick\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webdevtrick\/\",\"https:\/\/pinterest.com\/webdevtrick\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3\",\"name\":\"shaan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g\",\"caption\":\"shaan\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Scroll To Top Feature | HTML CSS JavaScript Go To Top","description":"Wantto create a button on the webpage to go back top? Get this JavaScript Scroll To Top Feature, with JavaScript scrollTop command. Get Source Code of its.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Scroll To Top Feature | HTML CSS JavaScript Go To Top","og_description":"Wantto create a button on the webpage to go back top? Get this JavaScript Scroll To Top Feature, with JavaScript scrollTop command. Get Source Code of its.","og_url":"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/","og_site_name":"Web Dev Trick","article_publisher":"https:\/\/www.facebook.com\/webdevtrick\/","article_published_time":"2019-05-25T17:26:50+00:00","og_image":[{"width":1200,"height":629,"url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/javascript-scroll-to-top.jpg","type":"image\/jpeg"}],"author":"shaan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"shaan","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/#article","isPartOf":{"@id":"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/"},"author":{"name":"shaan","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3"},"headline":"JavaScript Scroll To Top Feature | HTML CSS JavaScript Go To Top","datePublished":"2019-05-25T17:26:50+00:00","mainEntityOfPage":{"@id":"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/"},"wordCount":500,"commentCount":11,"publisher":{"@id":"https:\/\/webdevtrick.com\/#organization"},"image":{"@id":"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/javascript-scroll-to-top.jpg","keywords":["css animation","html and css","html source code","javascript tutorial","scrolltop","source code"],"articleSection":["CSS","HTML","JavaScript","Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdevtrick.com\/javascript-scroll-to-top\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/","url":"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/","name":"JavaScript Scroll To Top Feature | HTML CSS JavaScript Go To Top","isPartOf":{"@id":"https:\/\/webdevtrick.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/#primaryimage"},"image":{"@id":"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/javascript-scroll-to-top.jpg","datePublished":"2019-05-25T17:26:50+00:00","description":"Wantto create a button on the webpage to go back top? Get this JavaScript Scroll To Top Feature, with JavaScript scrollTop command. Get Source Code of its.","breadcrumb":{"@id":"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdevtrick.com\/javascript-scroll-to-top\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/#primaryimage","url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/javascript-scroll-to-top.jpg","contentUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/javascript-scroll-to-top.jpg","width":1200,"height":629,"caption":"javascript scroll to top"},{"@type":"BreadcrumbList","@id":"https:\/\/webdevtrick.com\/javascript-scroll-to-top\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdevtrick.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript Scroll To Top Feature | HTML CSS JavaScript Go To Top"}]},{"@type":"WebSite","@id":"https:\/\/webdevtrick.com\/#website","url":"https:\/\/webdevtrick.com\/","name":"Web Dev Trick","description":"HTML5, CSS3, JS, PHP Source Code &amp; Tutorial","publisher":{"@id":"https:\/\/webdevtrick.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdevtrick.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdevtrick.com\/#organization","name":"Web Dev Trick","url":"https:\/\/webdevtrick.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png","contentUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png","width":512,"height":512,"caption":"Web Dev Trick"},"image":{"@id":"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webdevtrick\/","https:\/\/pinterest.com\/webdevtrick\/"]},{"@type":"Person","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3","name":"shaan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g","caption":"shaan"}}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/1423","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/comments?post=1423"}],"version-history":[{"count":0,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/1423\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/media\/1425"}],"wp:attachment":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/media?parent=1423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/categories?post=1423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/tags?post=1423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}