Back to Top Button With Progress Bar Indicator

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.

back to top progressbar demo
Visit Rubikscu.be for the live demo.

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 🖰, offering a better browsing experience.

HTML Code

The HTML structure creates a “Back to top” button using a clickable div element with a class of back2topScroll. Inside the div, 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.

<div class="back2topScroll" title="Scroll to top">
  <svg class="circleSvg" viewBox="0 0 100 100">
    <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
  </svg>
</div>

CSS

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.

The arrow inside the circle accomplished with the ::after{content: “\27A4”;} property and you can set a different character for the hover inside the ::before declaration.

The color of the button is blue by default. You can change it to match your template by replacing the rgba(35, 130, 177,… bits in the CSS. Be careful because there is a separate opacity declared for hovering.

/* Scroll back to top BEGIN */
.back2topScroll{position:fixed;right:25px;bottom:25px;height:46px;width:46px;cursor:pointer;display:block;border-radius:50px;box-shadow:inset 0 0 0 2px rgba(0,0,0,0.1);z-index:10000;opacity:0;visibility:hidden;transform:translateY(15px);-webkit-transition:all 250ms linear;transition:all 250ms linear}
.back2topScroll.showProgress{opacity:1;visibility:visible;transform:translateY(0)}
.back2topScroll::after{color:rgba(35,130,177,0.4);position:absolute;transform:rotate(-90deg);content:"\27A4";text-align:center;line-height:46px;font-size:24px;left:0;top:0;height:46px;width:46px;cursor:pointer;display:block;z-index:1;-webkit-transition:all 250ms linear;transition:all 250ms linear}
.back2topScroll:hover::after{opacity:0}
.back2topScroll::before{background:rgba(35,130,177,1);position:absolute;transform:rotate(-90deg);content:"\27A4";text-align:center;line-height:46px;font-size:24px;opacity:0;-webkit-background-clip:text;-webkit-text-fill-color:transparent;left:0;top:0;height:46px;width:46px;cursor:pointer;display:block;z-index:2;-webkit-transition:all 250ms linear;transition:all 250ms linear}
.back2topScroll:hover::before{opacity:1;top:-5px}
.back2topScroll svg path{fill:none}
.back2topScroll svg.circleSvg path{stroke:rgba(35,130,177,0.4);stroke-width:4;box-sizing:border-box;-webkit-transition:all 250ms linear;transition:all 250ms linear}
/* Scroll back to top END */

JavaScript / jQuery

This script uses jQuery to animate the button’s visibility and manage the progress indicator. 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.

//Scroll back to top BEGIN
(function($) { "use strict";
  $(document).ready(function(){"use strict";
    var progressPath = document.querySelector('.back2topScroll path');
    var pathLength = progressPath.getTotalLength();
    progressPath.style.transition = progressPath.style.WebkitTransition = 'none';
    progressPath.style.strokeDasharray = pathLength + ' ' + pathLength;
    progressPath.style.strokeDashoffset = pathLength;
    progressPath.getBoundingClientRect();
    progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear';    
    var updateProgress = function () {
      var scroll = $(window).scrollTop();
      var height = $(document).height() - $(window).height();
      var progress = pathLength - (scroll * pathLength / height);
      progressPath.style.strokeDashoffset = progress;
    }
    updateProgress();
    $(window).scroll(updateProgress);  
    var offset = 70;
    var duration = 500;
    jQuery(window).on('scroll', function() {
      if (jQuery(this).scrollTop() > offset) {
        jQuery('.back2topScroll').addClass('showProgress');
      } else {
        jQuery('.back2topScroll').removeClass('showProgress');
      }
    });        
    jQuery('.back2topScroll').on('click', function(event) {
      event.preventDefault();
      jQuery('html, body').animate({scrollTop: 0}, duration);
      return false;
    })
  });
})(jQuery); 
//Scroll back to top END

A More Simple, Minimalist Solution

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.
scroll back to top button for website

You can see the live demo with gibberish text or just scroll down this page and look the bottom right corner of the site. It’s using the same widget.

HTML

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 (➤), so we don’t have to use an image to display the arrow.

<a id="back2Top" title="Back to top" href="#">&#10148;</a>

CSS

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.

#back2Top {
    width: 40px;
    line-height: 40px;
    overflow: hidden;
    z-index: 999;
    display: none;
    cursor: pointer;
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    position: fixed;
    bottom: 50px;
    right: 0;
    background-color: #DDD;
    color: #555;
    text-align: center;
    font-size: 30px;
    text-decoration: none;
}
#back2Top:hover {
    background-color: #DDF;
    color: #000;
}

JavaScript

Add this JavaScript code to your website theme and make sure jQuery is used.
The 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.

/*Scroll to top when arrow up clicked BEGIN*/
$(window).scroll(function() {
    var height = $(window).scrollTop();
    if (height > 100) {
        $('#back2Top').fadeIn();
    } else {
        $('#back2Top').fadeOut();
    }
});
$(document).ready(function() {
    $("#back2Top").click(function(event) {
        event.preventDefault();
        $("html, body").animate({ scrollTop: 0 }, "slow");
        return false;
    });

});
 /*Scroll to top when arrow up clicked END*/