Enhance Your 'Go Up' Button with a Scroll Progress Indicator

Upgrade the traditional "Go Up" button by incorporating a circular scroll progress indicator. This feature keeps users informed about their position on the page and offers a visually engaging navigation aid.

Step-by-Step Instructions

1. Create a Fixed Go Up Button

Position the button for easy access at the bottom-right corner of the page:

<button id="goUp" style="position:fixed;bottom:32px;right:32px;">Go Up</button>

2. Add a Scroll Indicator Border

Wrap the button in a container and include elements for the progress ring. Apply the following CSS for styling and layout:

#goUpWrapper {  position: fixed;  bottom: 32px;  right: 32px;  width: 60px;  height: 60px;  display: flex;  align-items: center;  justify-content: center;}#goUp {  z-index: 2;  position: absolute;  width: 44px;  height: 44px;  border-radius: 50%;}#progressRing {  position: absolute;  width: 60px;  height: 60px;  border-radius: 50%;  border: 4px solid #eee; /* background ring */  box-sizing: border-box;}#progressRingFill {  position: absolute;  width: 60px;  height: 60px;  border-radius: 50%;  border: 4px solid #00f; /* indicator color */  border-top-color: transparent;  transform: rotate(-90deg);  box-sizing: border-box;  transition: stroke-dashoffset 0.2s;}

3. Add the HTML Structure

<div id="goUpWrapper">  <div id="progressRing"></div>  <div id="progressRingFill"></div>  <button id="goUp">Go Up</button></div>

4. Add JavaScript for Scroll Tracking and Smooth Scroll Up

Track the scroll position and update the indicator, plus enable smooth scrolling:

const goUpBtn = document.getElementById('goUp');const ringFill = document.getElementById('progressRingFill');function updateScrollIndicator() {const scrollTop = window.scrollY;const docHeight = document.documentElement.scrollHeight - window.innerHeight;const scrollPercent = docHeight ? scrollTop / docHeight : 0;const angle = scrollPercent * 360;ringFill.style.transform = `rotate(${angle - 90}deg)`;}window.addEventListener('scroll', updateScrollIndicator);goUpBtn.addEventListener('click', function() {  window.scrollTo({ top: 0, behavior: 'smooth' });});

Customization Tips

  • For smoother, more advanced circular progress animations, consider using SVG.
  • Adjust colors and sizes in the CSS to align the indicator with your branding.
  • To create a square progress indicator, experiment with animated borders or linear gradient backgrounds.

Additional Resources

Jared Malan