Enhance Your Go Up Button with a Scroll Indicator Border

Upgrade the standard "Go Up" button by adding a scroll indicator border that visually tracks page progress. This feature not only improves user experience but also adds a modern, interactive touch to your site.

Step-by-Step Instructions

1. Create a Fixed Go Up Button

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

<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 add elements for the circular progress indicator. Use the following CSS for layout and styling:

#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 rotate the indicator accordingly. Also, enable smooth scrolling on button click:

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 a more advanced circular progress ring, consider using SVG for smoother animations.
• Adjust colors and sizes in the CSS to match your branding.
• To create a square progress indicator, use animated borders or a linear gradient background.