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

Elevate the standard 'Go Up' button by integrating a circular scroll indicator that visually displays page progress. This enhancement improves user experience by providing intuitive feedback and adds a modern, interactive element to any website.

Published April 14, 2026

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.