{"id":55,"date":"2026-02-28T10:58:00","date_gmt":"2026-02-28T08:58:00","guid":{"rendered":"https:\/\/html-online.com\/articles\/?p=55"},"modified":"2026-03-01T12:11:16","modified_gmt":"2026-03-01T10:11:16","slug":"dynamic-scroll-back-top-page-button-javascript","status":"publish","type":"post","link":"https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/","title":{"rendered":"Scroll Back to Top Button With Progress Bar Indicator"},"content":{"rendered":"

The Back to Top ↑<\/em> button is a useful user interface element commonly found on web pages, particularly those with long scrolling content. This button allows users to quickly return to the top of the page with a single click, improving navigation efficiency and overall user experience.<\/strong><\/p>\n

\"back<\/a>
Visit OnlineCube.com<\/a> for the live demo.<\/em><\/p>\n

<\/p>\n

Enhancing this functionality, the integration of a progress bar indicator provides users with visual feedback on their scroll position relative to the entire page. This added feature not only makes the button more interactive but also informs users about their current location on the page and how much content remains to be explored \ud83d\uddb0, offering a better browsing experience.<\/p>\n

HTML Code<\/h3>\n

The HTML structure creates a “Back to top” button using a clickable div<\/strong> element with a class of back2topScroll<\/strong>. Inside the div<\/strong>, there’s an SVG element containing a circular path. The SVG is used to create a circular progress bar around the button. The arrow itself is not added yet because this will be added with the ::after CSS property.<\/p>\n

\n
<div<\/span> class=<\/span>"back2topScroll"<\/span> title=<\/span>"Scroll to top"<\/span>><\/span>\n  <svg<\/span> class=<\/span>"circleSvg"<\/span> viewBox=<\/span>"0 0 100 100"<\/span>><\/span>\n    <path<\/span> d=<\/span>"M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"<\/span>\/><\/span>\n  <\/svg><\/span>\n<\/div><\/span>\n<\/pre>\n<\/div>\n
CSS<\/h3>\n
The CSS styles the button to be fixed at the bottom-right corner of the page. The button is initially hidden and becomes visible when scrolling down. The CSS also styles the SVG path to create the circular progress bar and adds hover effects to the button.<\/p>\n
The arrow inside the circle accomplished with the ::after{content: “\\27A4”;}<\/strong> property and you can set a different character<\/a> for the hover inside the ::before<\/strong> declaration.<\/p>\n
The color of the button is blue by default. You can change it to match your template by replacing the rgba(35, 130, 177,<\/strong>… bits in the CSS. Be careful because there is a separate opacity declared for hovering.<\/p>\n
\n
\/* Scroll back to top BEGIN *\/<\/span>\n.back2topScroll<\/span>{position<\/span>:<\/span>fixed<\/span>;right<\/span>:<\/span>25px<\/span>;bottom<\/span>:<\/span>25px<\/span>;height<\/span>:<\/span>46px<\/span>;width<\/span>:<\/span>46px<\/span>;cursor<\/span>:<\/span>pointer<\/span>;display<\/span>:<\/span>block<\/span>;border<\/span>-<\/span>radius:<\/span>50px<\/span>;box-<\/span>shadow:<\/span>inset<\/span> 0<\/span> 0<\/span> 0<\/span> 2px<\/span> rgba(0<\/span>,<\/span>0<\/span>,<\/span>0<\/span>,<\/span>0<\/span>.<\/span>1<\/span>);z-index<\/span>:<\/span>10000<\/span>;opacity<\/span>:<\/span>0<\/span>;visibility<\/span>:<\/span>hidden<\/span>;transform:<\/span>translateY(15px<\/span>);-<\/span>webkit-<\/span>transition:<\/span>all 250<\/span>ms linear;transition:<\/span>all 250<\/span>ms linear}\n.back2topScroll.showProgress<\/span>{opacity<\/span>:<\/span>1<\/span>;visibility<\/span>:<\/span>visible<\/span>;transform:<\/span>translateY(0<\/span>)}\n.back2topScroll<\/span>:<\/span>:after<\/span>{color<\/span>:<\/span>rgba(35<\/span>,<\/span>130<\/span>,<\/span>177<\/span>,<\/span>0<\/span>.<\/span>4<\/span>);position<\/span>:<\/span>absolute<\/span>;transform:<\/span>rotate(-90<\/span>deg);content<\/span>:<\/span>"\\27A4"<\/span>;text-align<\/span>:<\/span>center<\/span>;line-height<\/span>:<\/span>46px<\/span>;font-size<\/span>:<\/span>24px<\/span>;left<\/span>:<\/span>0<\/span>;top<\/span>:<\/span>0<\/span>;height<\/span>:<\/span>46px<\/span>;width<\/span>:<\/span>46px<\/span>;cursor<\/span>:<\/span>pointer<\/span>;display<\/span>:<\/span>block<\/span>;z-index<\/span>:<\/span>1<\/span>;-<\/span>webkit-<\/span>transition:<\/span>all 250<\/span>ms linear;transition:<\/span>all 250<\/span>ms linear}\n.back2topScroll<\/span>:hover<\/span>:<\/span>:after<\/span>{opacity<\/span>:<\/span>0<\/span>}\n.back2topScroll<\/span>:<\/span>:before<\/span>{background<\/span>:<\/span>rgba(35<\/span>,<\/span>130<\/span>,<\/span>177<\/span>,<\/span>1<\/span>);position<\/span>:<\/span>absolute<\/span>;transform:<\/span>rotate(-90<\/span>deg);content<\/span>:<\/span>"\\27A4"<\/span>;text-align<\/span>:<\/span>center<\/span>;line-height<\/span>:<\/span>46px<\/span>;font-size<\/span>:<\/span>24px<\/span>;opacity<\/span>:<\/span>0<\/span>;-<\/span>webkit-<\/span>background<\/span>-<\/span>clip<\/span>:<\/span>text<\/span>;-<\/span>webkit-<\/span>text<\/span>-<\/span>fill-<\/span>color<\/span>:<\/span>transparent<\/span>;left<\/span>:<\/span>0<\/span>;top<\/span>:<\/span>0<\/span>;height<\/span>:<\/span>46px<\/span>;width<\/span>:<\/span>46px<\/span>;cursor<\/span>:<\/span>pointer<\/span>;display<\/span>:<\/span>block<\/span>;z-index<\/span>:<\/span>2<\/span>;-<\/span>webkit-<\/span>transition:<\/span>all 250<\/span>ms linear;transition:<\/span>all 250<\/span>ms linear}\n.back2topScroll<\/span>:hover<\/span>:<\/span>:before<\/span>{opacity<\/span>:<\/span>1<\/span>;top<\/span>:-<\/span>5px<\/span>}\n.back2topScroll<\/span> svg<\/span> path<\/span>{fill:<\/span>none<\/span>}\n.back2topScroll<\/span> svg<\/span>.circleSvg<\/span> path<\/span>{stroke:<\/span>rgba(35<\/span>,<\/span>130<\/span>,<\/span>177<\/span>,<\/span>0<\/span>.<\/span>4<\/span>);stroke-<\/span>width<\/span>:<\/span>4<\/span>;box-<\/span>sizing:<\/span>border<\/span>-<\/span>box;-<\/span>webkit-<\/span>transition:<\/span>all 250<\/span>ms linear;transition:<\/span>all 250<\/span>ms linear}\n\/* Scroll back to top END *\/<\/span>\n<\/pre>\n<\/div>\n
JavaScript \/ jQuery<\/h3>\n
This script uses jQuery<\/a> to animate the button’s visibility and manage the progress indicator<\/a>. It calculates the length of the SVG path and updates the stroke offset as the user scrolls, creating a visual indication of how far down the page the user is. The script also animates scrolling to the top when the button is clicked.<\/p>\n
\n
\/\/Scroll back to top BEGIN<\/span>\n(function<\/span>($) { "use strict"<\/span>;\n  $(document<\/span>).ready(function<\/span>(){"use strict"<\/span>;\n    var<\/span> progressPath =<\/span> document<\/span>.querySelector('.back2topScroll path'<\/span>);\n    var<\/span> pathLength =<\/span> progressPath.getTotalLength();\n    progressPath.style.transition =<\/span> progressPath.style.WebkitTransition =<\/span> 'none'<\/span>;\n    progressPath.style.strokeDasharray =<\/span> pathLength +<\/span> ' '<\/span> +<\/span> pathLength;\n    progressPath.style.strokeDashoffset =<\/span> pathLength;\n    progressPath.getBoundingClientRect();\n    progressPath.style.transition =<\/span> progressPath.style.WebkitTransition =<\/span> 'stroke-dashoffset 10ms linear'<\/span>;    \n    var<\/span> updateProgress =<\/span> function<\/span> () {\n      var<\/span> scroll =<\/span> $(window<\/span>).scrollTop();\n      var<\/span> height =<\/span> $(document<\/span>).height() -<\/span> $(window<\/span>).height();\n      var<\/span> progress =<\/span> pathLength -<\/span> (scroll *<\/span> pathLength \/<\/span> height);\n      progressPath.style.strokeDashoffset =<\/span> progress;\n    }\n    updateProgress();\n    $(window<\/span>).scroll(updateProgress);  \n    var<\/span> offset =<\/span> 70<\/span>;\n    var<\/span> duration =<\/span> 500<\/span>;\n    jQuery(window<\/span>).on('scroll'<\/span>, function<\/span>() {\n      if<\/span> (jQuery(this<\/span>).scrollTop() ><\/span> offset) {\n        jQuery('.back2topScroll'<\/span>).addClass('showProgress'<\/span>);\n      } else<\/span> {\n        jQuery('.back2topScroll'<\/span>).removeClass('showProgress'<\/span>);\n      }\n    });        \n    jQuery('.back2topScroll'<\/span>).on('click'<\/span>, function<\/span>(event) {\n      event.preventDefault();\n      jQuery('html, body'<\/span>).animate({scrollTop:<\/span> 0<\/span>}, duration);\n      return<\/span> false<\/span>;\n    })\n  });\n})(jQuery); \n\/\/Scroll back to top END<\/span>\n<\/pre>\n<\/div>\n
A More Simple, Minimalist Solution<\/h2>\n
Here’s a more simple solution, without the progress indicator. This is the one used on our website so you can test it right away.<\/strong>
\n\"scroll<\/a><\/p>\n
You can see the live demo<\/strong><\/a> with gibberish text or just scroll down this page and look the bottom right corner of the site. It’s using the same widget.<\/p>\n
HTML<\/h2>\n
Add the link below anywhere to your HTML source, for example in the footer before the closing <\/body> tag. For WordPress use the footer.php or any other template file that’s displayed on all pages. The link has a unique identifier, a tooltip title and contains a special arrow character (\u27a4), so we don’t have to use an image to display the arrow.<\/p>\n
<a<\/span> id<\/span>=\"back2Top\"<\/span> title<\/span>=\"Back to top\"<\/span> href<\/span>=\"#\"<\/span>><\/span>&#10148;<\/span><\/a<\/span>><\/span>\n<\/pre>\n
CSS<\/h2>\n
Include the stylesheet and adjust it if your website’s design requires that. Set the size, colors, position, hover effect of the arrow. The HTML arrow character we used was originally pointing rightwards and this CSS code is rotating it counterclockwise to make it point upwards.<\/p>\n
#back2Top<\/span> {\n    width<\/span>: 40px<\/span><\/span>;\n    line-height<\/span>: 40px<\/span><\/span>;\n    overflow<\/span>: hidden<\/span>;\n    z-index<\/span>: 999<\/span>;\n    display<\/span>: none<\/span>;\n    cursor<\/span>: pointer<\/span>;\n    -moz-transform: rotate(270deg<\/span><\/span>);\n    -webkit-transform: rotate(270deg<\/span><\/span>);\n    -o-transform: rotate(270deg<\/span><\/span>);\n    -ms-transform: rotate(270deg<\/span><\/span>);\n    transform: rotate(270deg<\/span><\/span>);\n    position<\/span>: fixed<\/span>;\n    bottom<\/span>: 50px<\/span><\/span>;\n    right<\/span>: 0<\/span>;\n    background-color<\/span>: #DDD<\/span>;\n    color<\/span>: #555<\/span>;\n    text-align<\/span>: center<\/span>;\n    font-size<\/span>: 30px<\/span><\/span>;\n    text-decoration<\/span>: none<\/span>;\n}\n#back2Top<\/span>:hover<\/span> {\n    background-color<\/span>: #DDF<\/span>;\n    color<\/span>: #000<\/span>;\n}\n<\/pre>\n
JavaScript<\/h2>\n
Add this JavaScript code to your website theme and make sure jQuery is used.
\nThe script checks the height position on every page scroll and fades in the widget if it has reached the 100px limit while another event listener detects the button clicks and smoothly scrolls back to the top of the page.<\/p>\n
\/*Scroll to top when arrow up clicked BEGIN*\/<\/span>\n$<\/span>(window<\/span>).scroll<\/span>(function() {\n    var height =<\/span> $<\/span>(window<\/span>).scrollTop();\n    if<\/span> (height ><\/span> 100<\/span>) {\n        $<\/span>('#back2Top'<\/span>).fadeIn();\n    } else<\/span> {\n        $<\/span>('#back2Top'<\/span>).fadeOut();\n    }\n});\n$<\/span>(document<\/span>).ready(function() {\n    $<\/span>(\"#back2Top\"<\/span>).click<\/span>(function(event<\/span>) {\n        event<\/span>.preventDefault();\n        $<\/span>(\"html, body\"<\/span>).animate({ scrollTop: 0<\/span> }, \"slow\"<\/span>);\n        return<\/span> false<\/span>;\n    });\n\n});\n \/*Scroll to top when arrow up clicked END*\/<\/span>\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
The Back to Top ↑ button is a useful user interface element commonly found on web pages, particularly those with long scrolling content. This button allows users to quickly return to the top of the page with a single click, improving navigation efficiency and overall user experience. Visit OnlineCube.com for the live demo.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,3,4,5,6],"tags":[],"class_list":["post-55","post","type-post","status-publish","format-standard","hentry","category-css","category-freebies","category-html","category-javascript","category-jquery"],"yoast_head":"\nSimple Scroll Back to Top of the Page Button JavaScript<\/title>\n<meta name=\"description\" content=\"The Back to Top \u2191 button allows users to quickly return to the top of the page with a single click, improving navigation and experience\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Simple Scroll Back to Top of the Page Button JavaScript\" \/>\n<meta property=\"og:description\" content=\"The Back to Top \u2191 button allows users to quickly return to the top of the page with a single click, improving navigation and experience\" \/>\n<meta property=\"og:url\" content=\"https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML Online\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/htmlcoding\/\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-28T08:58:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-01T10:11:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/07\/back-to-top-progress-indicator-rubiks-cube.jpg\" \/>\n<meta name=\"author\" content=\"HTML Editor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"HTML Editor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/\"},\"author\":{\"name\":\"HTML Editor\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\"},\"headline\":\"Scroll Back to Top Button With Progress Bar Indicator\",\"datePublished\":\"2026-02-28T08:58:00+00:00\",\"dateModified\":\"2026-03-01T10:11:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/\"},\"wordCount\":583,\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/07\/back-to-top-progress-indicator-rubiks-cube.jpg\",\"articleSection\":[\"CSS\",\"Freebies\",\"HTML\",\"JavaScript\",\"jQuery\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/\",\"url\":\"https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/\",\"name\":\"Simple Scroll Back to Top of the Page Button JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/07\/back-to-top-progress-indicator-rubiks-cube.jpg\",\"datePublished\":\"2026-02-28T08:58:00+00:00\",\"dateModified\":\"2026-03-01T10:11:16+00:00\",\"description\":\"The Back to Top \u2191 button allows users to quickly return to the top of the page with a single click, improving navigation and experience\",\"breadcrumb\":{\"@id\":\"https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/#primaryimage\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/07\/back-to-top-progress-indicator-rubiks-cube.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/07\/back-to-top-progress-indicator-rubiks-cube.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/html-online.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Scroll Back to Top Button With Progress Bar Indicator\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/html-online.com\/articles\/#website\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"name\":\"HTML Online Articles\",\"description\":\"Tips, tricks, tutorials\u2026\",\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/html-online.com\/articles\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/html-online.com\/articles\/#organization\",\"name\":\"HTML Online\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"width\":350,\"height\":350,\"caption\":\"HTML Online\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/htmlcoding\/\",\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\",\"name\":\"HTML Editor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"caption\":\"HTML Editor\"},\"description\":\"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/@htmlg\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Simple Scroll Back to Top of the Page Button JavaScript","description":"The Back to Top \u2191 button allows users to quickly return to the top of the page with a single click, improving navigation and experience","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:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/","og_locale":"en_GB","og_type":"article","og_title":"Simple Scroll Back to Top of the Page Button JavaScript","og_description":"The Back to Top \u2191 button allows users to quickly return to the top of the page with a single click, improving navigation and experience","og_url":"https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/","og_site_name":"HTML Online","article_publisher":"https:\/\/www.facebook.com\/htmlcoding\/","article_published_time":"2026-02-28T08:58:00+00:00","article_modified_time":"2026-03-01T10:11:16+00:00","og_image":[{"url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/07\/back-to-top-progress-indicator-rubiks-cube.jpg","type":"","width":"","height":""}],"author":"HTML Editor","twitter_card":"summary_large_image","twitter_misc":{"Written by":"HTML Editor","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/#article","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/"},"author":{"name":"HTML Editor","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d"},"headline":"Scroll Back to Top Button With Progress Bar Indicator","datePublished":"2026-02-28T08:58:00+00:00","dateModified":"2026-03-01T10:11:16+00:00","mainEntityOfPage":{"@id":"https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/"},"wordCount":583,"publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"image":{"@id":"https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/07\/back-to-top-progress-indicator-rubiks-cube.jpg","articleSection":["CSS","Freebies","HTML","JavaScript","jQuery"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/","url":"https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/","name":"Simple Scroll Back to Top of the Page Button JavaScript","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/#website"},"primaryImageOfPage":{"@id":"https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/#primaryimage"},"image":{"@id":"https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/07\/back-to-top-progress-indicator-rubiks-cube.jpg","datePublished":"2026-02-28T08:58:00+00:00","dateModified":"2026-03-01T10:11:16+00:00","description":"The Back to Top \u2191 button allows users to quickly return to the top of the page with a single click, improving navigation and experience","breadcrumb":{"@id":"https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/#primaryimage","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/07\/back-to-top-progress-indicator-rubiks-cube.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2024\/07\/back-to-top-progress-indicator-rubiks-cube.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/html-online.com\/articles\/dynamic-scroll-back-top-page-button-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/html-online.com\/articles\/"},{"@type":"ListItem","position":2,"name":"Scroll Back to Top Button With Progress Bar Indicator"}]},{"@type":"WebSite","@id":"https:\/\/html-online.com\/articles\/#website","url":"https:\/\/html-online.com\/articles\/","name":"HTML Online Articles","description":"Tips, tricks, tutorials\u2026","publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/html-online.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/html-online.com\/articles\/#organization","name":"HTML Online","url":"https:\/\/html-online.com\/articles\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","width":350,"height":350,"caption":"HTML Online"},"image":{"@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/htmlcoding\/","https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww"]},{"@type":"Person","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d","name":"HTML Editor","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","caption":"HTML Editor"},"description":"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.","sameAs":["https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/@htmlg"]}]}},"_links":{"self":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/55","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/comments?post=55"}],"version-history":[{"count":3,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/55\/revisions"}],"predecessor-version":[{"id":2547,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/55\/revisions\/2547"}],"wp:attachment":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/media?parent=55"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/categories?post=55"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/tags?post=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}