{"id":22882,"date":"2024-03-16T00:24:58","date_gmt":"2024-03-16T00:24:58","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/five-ways-to-achieve-scrolling-back-to-the-top-of-a-webpage-using-javascript-from-basic-implementation-to-enhancement\/"},"modified":"2024-03-21T23:56:20","modified_gmt":"2024-03-21T23:56:20","slug":"five-ways-to-achieve-scrolling-back-to-the-top-of-a-webpage-using-javascript-from-basic-implementation-to-enhancement","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/five-ways-to-achieve-scrolling-back-to-the-top-of-a-webpage-using-javascript-from-basic-implementation-to-enhancement\/","title":{"rendered":"Five ways to achieve scrolling back to the top of a webpage using JavaScript (from basic implementation to enhancement)"},"content":{"rendered":"
    \n
  1. You can achieve this using the window.scrollTo or document.documentElement.scrollTop method.<\/li>\n<\/ol>\n
    function<\/span> scrollToTop<\/span>(<\/span>) {\r\n  window<\/span>.scrollTo<\/span>(0<\/span>, 0<\/span>);\r\n}\r\n<\/code><\/pre>\n
      \n
    1. Implement smooth scrolling effect by combining the window.scrollTo method with requestAnimationFrame.<\/li>\n<\/ol>\n
      function<\/span> smoothScrollToTop<\/span>(<\/span>) {\r\n  const<\/span> currentScroll = document<\/span>.documentElement<\/span>.scrollTop<\/span> || document<\/span>.body<\/span>.scrollTop<\/span>;\r\n  if<\/span> (currentScroll > 0<\/span>) {\r\n    window<\/span>.requestAnimationFrame<\/span>(smoothScrollToTop);\r\n    window<\/span>.scrollTo<\/span>(0<\/span>, currentScroll - (currentScroll \/ 8<\/span>));\r\n  }\r\n}\r\n<\/code><\/pre>\n
        \n
      1. Utilize the scrollIntoView method to scroll to the top of a specified element.<\/li>\n<\/ol>\n
        function<\/span> scrollToElementTop<\/span>(element<\/span>) {\r\n  element.scrollIntoView<\/span>({ behavior<\/span>: 'smooth'<\/span>, block<\/span>: 'start'<\/span> });\r\n}\r\n<\/code><\/pre>\n
          \n
        1. Achieve smooth scrolling effect with the animate method.<\/li>\n<\/ol>\n
          function<\/span> animateScrollToTop<\/span>(duration<\/span>) {\r\n  const<\/span> start = document<\/span>.documentElement<\/span>.scrollTop<\/span> || document<\/span>.body<\/span>.scrollTop<\/span>;\r\n  const<\/span> target = 0<\/span>;\r\n  const<\/span> distance = target - start;\r\n  const<\/span> startTime = performance.now<\/span>();\r\n  \r\n  function<\/span> step<\/span>(<\/span>) {\r\n    const<\/span> currentTime = performance.now<\/span>();\r\n    const<\/span> elapsed = currentTime - startTime;\r\n    const<\/span> progress = Math<\/span>.min<\/span>(elapsed \/ duration, 1<\/span>);\r\n    const<\/span> easing = function<\/span>(t<\/span>) { return<\/span> t * (2<\/span> - t); }; \/\/ \u7f13\u52a8\u51fd\u6570\uff0c\u4f8b\u5982\u4f7f\u7528\u4e8c\u6b21\u65b9\u51fd\u6570<\/span>\r\n    const<\/span> position = start + distance * easing<\/span>(progress);\r\n    \r\n    window<\/span>.scrollTo<\/span>(0<\/span>, position);\r\n    \r\n    if<\/span> (progress < 1<\/span>) {\r\n      window<\/span>.requestAnimationFrame<\/span>(step);\r\n    }\r\n  }\r\n  \r\n  window<\/span>.requestAnimationFrame<\/span>(step);\r\n}\r\n<\/code><\/pre>\n
            \n
          1. Enhanced version: Add a button element and bind a click event.<\/li>\n<\/ol>\n
            <button<\/span> id<\/span>=\"scrollToTopBtn\"<\/span>><\/span>\u56de\u5230\u9876\u90e8<\/button<\/span>><\/span>\r\n<\/code><\/pre>\n
            document<\/span>.getElementById<\/span>('scrollToTopBtn'<\/span>).addEventListener<\/span>('click'<\/span>, scrollToTop);\r\n\r\nfunction<\/span> scrollToTop<\/span>(<\/span>) {\r\n  window<\/span>.scrollTo<\/span>({ top<\/span>: 0<\/span>, behavior<\/span>: 'smooth'<\/span> });\r\n}\r\n<\/code><\/pre>\n
            Here are five common ways to implement a back to top button, ranging from the basic scroll to top to an enhanced version with smooth scrolling effects and button click event. You can choose the appropriate method based on your specific needs to achieve the back to top functionality.<\/p>\n","protected":false},"excerpt":{"rendered":"
            You can achieve this using the window.scrollTo or document.documentElement.scrollTop method. function scrollToTop() { window.scrollTo(0, 0); } Implement smooth scrolling effect by combining the window.scrollTo method with requestAnimationFrame. function smoothScrollToTop() { const currentScroll = document.documentElement.scrollTop || document.body.scrollTop; if (currentScroll > 0) { window.requestAnimationFrame(smoothScrollToTop); window.scrollTo(0, currentScroll – (currentScroll \/ 8)); } } Utilize the scrollIntoView method to […]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-22882","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nFive ways to achieve scrolling back to the top of a webpage using JavaScript (from basic implementation to enhancement) - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/five-ways-to-achieve-scrolling-back-to-the-top-of-a-webpage-using-javascript-from-basic-implementation-to-enhancement\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Five ways to achieve scrolling back to the top of a webpage using JavaScript (from basic implementation to enhancement)\" \/>\n<meta property=\"og:description\" content=\"You can achieve this using the window.scrollTo or document.documentElement.scrollTop method. function scrollToTop() { window.scrollTo(0, 0); } Implement smooth scrolling effect by combining the window.scrollTo method with requestAnimationFrame. function smoothScrollToTop() { const currentScroll = document.documentElement.scrollTop || document.body.scrollTop; if (currentScroll > 0) { window.requestAnimationFrame(smoothScrollToTop); window.scrollTo(0, currentScroll - (currentScroll \/ 8)); } } Utilize the scrollIntoView method to […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/five-ways-to-achieve-scrolling-back-to-the-top-of-a-webpage-using-javascript-from-basic-implementation-to-enhancement\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-16T00:24:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T23:56:20+00:00\" \/>\n<meta name=\"author\" content=\"Sophia Anderson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sophia Anderson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/five-ways-to-achieve-scrolling-back-to-the-top-of-a-webpage-using-javascript-from-basic-implementation-to-enhancement\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/five-ways-to-achieve-scrolling-back-to-the-top-of-a-webpage-using-javascript-from-basic-implementation-to-enhancement\/\"},\"author\":{\"name\":\"Sophia Anderson\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30\"},\"headline\":\"Five ways to achieve scrolling back to the top of a webpage using JavaScript (from basic implementation to enhancement)\",\"datePublished\":\"2024-03-16T00:24:58+00:00\",\"dateModified\":\"2024-03-21T23:56:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/five-ways-to-achieve-scrolling-back-to-the-top-of-a-webpage-using-javascript-from-basic-implementation-to-enhancement\/\"},\"wordCount\":125,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/five-ways-to-achieve-scrolling-back-to-the-top-of-a-webpage-using-javascript-from-basic-implementation-to-enhancement\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/five-ways-to-achieve-scrolling-back-to-the-top-of-a-webpage-using-javascript-from-basic-implementation-to-enhancement\/\",\"name\":\"Five ways to achieve scrolling back to the top of a webpage using JavaScript (from basic implementation to enhancement) - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-16T00:24:58+00:00\",\"dateModified\":\"2024-03-21T23:56:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/five-ways-to-achieve-scrolling-back-to-the-top-of-a-webpage-using-javascript-from-basic-implementation-to-enhancement\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/five-ways-to-achieve-scrolling-back-to-the-top-of-a-webpage-using-javascript-from-basic-implementation-to-enhancement\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/five-ways-to-achieve-scrolling-back-to-the-top-of-a-webpage-using-javascript-from-basic-implementation-to-enhancement\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Five ways to achieve scrolling back to the top of a webpage using JavaScript (from basic implementation to enhancement)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30\",\"name\":\"Sophia Anderson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g\",\"caption\":\"Sophia Anderson\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/sophiaanderson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Five ways to achieve scrolling back to the top of a webpage using JavaScript (from basic implementation to enhancement) - Blog - Silicon Cloud","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:\/\/www.silicloud.com\/blog\/five-ways-to-achieve-scrolling-back-to-the-top-of-a-webpage-using-javascript-from-basic-implementation-to-enhancement\/","og_locale":"en_US","og_type":"article","og_title":"Five ways to achieve scrolling back to the top of a webpage using JavaScript (from basic implementation to enhancement)","og_description":"You can achieve this using the window.scrollTo or document.documentElement.scrollTop method. function scrollToTop() { window.scrollTo(0, 0); } Implement smooth scrolling effect by combining the window.scrollTo method with requestAnimationFrame. function smoothScrollToTop() { const currentScroll = document.documentElement.scrollTop || document.body.scrollTop; if (currentScroll > 0) { window.requestAnimationFrame(smoothScrollToTop); window.scrollTo(0, currentScroll - (currentScroll \/ 8)); } } Utilize the scrollIntoView method to […]","og_url":"https:\/\/www.silicloud.com\/blog\/five-ways-to-achieve-scrolling-back-to-the-top-of-a-webpage-using-javascript-from-basic-implementation-to-enhancement\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-16T00:24:58+00:00","article_modified_time":"2024-03-21T23:56:20+00:00","author":"Sophia Anderson","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Sophia Anderson","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/five-ways-to-achieve-scrolling-back-to-the-top-of-a-webpage-using-javascript-from-basic-implementation-to-enhancement\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/five-ways-to-achieve-scrolling-back-to-the-top-of-a-webpage-using-javascript-from-basic-implementation-to-enhancement\/"},"author":{"name":"Sophia Anderson","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30"},"headline":"Five ways to achieve scrolling back to the top of a webpage using JavaScript (from basic implementation to enhancement)","datePublished":"2024-03-16T00:24:58+00:00","dateModified":"2024-03-21T23:56:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/five-ways-to-achieve-scrolling-back-to-the-top-of-a-webpage-using-javascript-from-basic-implementation-to-enhancement\/"},"wordCount":125,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/five-ways-to-achieve-scrolling-back-to-the-top-of-a-webpage-using-javascript-from-basic-implementation-to-enhancement\/","url":"https:\/\/www.silicloud.com\/blog\/five-ways-to-achieve-scrolling-back-to-the-top-of-a-webpage-using-javascript-from-basic-implementation-to-enhancement\/","name":"Five ways to achieve scrolling back to the top of a webpage using JavaScript (from basic implementation to enhancement) - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-16T00:24:58+00:00","dateModified":"2024-03-21T23:56:20+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/five-ways-to-achieve-scrolling-back-to-the-top-of-a-webpage-using-javascript-from-basic-implementation-to-enhancement\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/five-ways-to-achieve-scrolling-back-to-the-top-of-a-webpage-using-javascript-from-basic-implementation-to-enhancement\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/five-ways-to-achieve-scrolling-back-to-the-top-of-a-webpage-using-javascript-from-basic-implementation-to-enhancement\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Five ways to achieve scrolling back to the top of a webpage using JavaScript (from basic implementation to enhancement)"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30","name":"Sophia Anderson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g","caption":"Sophia Anderson"},"url":"https:\/\/www.silicloud.com\/blog\/author\/sophiaanderson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/22882","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=22882"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/22882\/revisions"}],"predecessor-version":[{"id":56828,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/22882\/revisions\/56828"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=22882"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=22882"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=22882"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}