Instruction: How to Add a “Back to Top” Button with a Scroll Indicator to Your Website
A “Back to Top” button with a scroll progress indicator allows users to easily return to the top of the page while visually displaying how much content has been scrolled. This feature enhances the user experience, especially on long pages.
Why Add a “Back to Top” Button?
On long pages, manually scrolling back to the top can be inconvenient for users. The “Back to Top” button solves this problem by offering the following benefits:- ✅ Easy Navigation: Quickly return to the top of the page.
- ✅ Progress Visualization: The indicator shows how much of the page has been scrolled.
- ✅ Smooth Scrolling: Gentle and comfortable scrolling back to the top.
🛠️ Step 1: Add the HTML Markup
Insert the following code before the closing</body> tag:
<!-- Back to Top Button -->
<div id="scrollTopButton">
<svg class="progress-circle" width="60" height="60" viewBox="0 0 60 60">
<circle class="track" cx="30" cy="30" r="28"></circle>
<circle class="progress" cx="30" cy="30" r="28"></circle>
</svg>
<div class="arrow">▲</div>
</div>🎨 Step 2: Add CSS Styles
Add the following CSS code to your website’s stylesheet or in the<style> block inside the <head>:
/* Back to Top Button */
#scrollTopButton {
position: fixed;
bottom: 30px;
right: 30px;
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: opacity 0.3s ease, transform 0.3s ease;
}
#scrollTopButton.hidden {
opacity: 0;
pointer-events: none;
transform: translateY(20px);
}
/* Arrow */
#scrollTopButton .arrow {
font-size: 16px;
color: #FF3D3D;
position: absolute;
z-index: 2;
}
/* Scroll Indicator */
#scrollTopButton svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
#scrollTopButton .track {
fill: none;
stroke: #e6e6e6;
stroke-width: 4;
}
#scrollTopButton .progress {
fill: none;
stroke: #FF3D3D;
stroke-width: 4;
stroke-dasharray: 176;
stroke-dashoffset: 176;
transition: stroke-dashoffset 0.3s ease;
}⚙️ Step 3: Add JavaScript
Include the following JavaScript code before the closing</body> tag:
document.addEventListener('DOMContentLoaded', () => {
const scrollTopButton = document.getElementById('scrollTopButton');
const progressCircle = document.querySelector('#scrollTopButton .progress');
if (!progressCircle) {
console.error('The .progress element was not found. Check your HTML structure.');
return;
}
const circleRadius = progressCircle.r.baseVal.value; // Circle radius
const circumference = 2 * Math.PI * circleRadius; // Circle circumference
// Set initial indicator values
progressCircle.style.strokeDasharray = `${circumference}`;
progressCircle.style.strokeDashoffset = `${circumference}`;
// Track scrolling
window.addEventListener('scroll', () => {
let scrollTop = window.scrollY || document.documentElement.scrollTop;
let scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
let progress = scrollTop / scrollHeight;
let dashOffset = circumference - (circumference * progress);
progressCircle.style.strokeDashoffset = dashOffset;
// Show/hide the button
if (scrollTop > 100) {
scrollTopButton.classList.remove('hidden');
} else {
scrollTopButton.classList.add('hidden');
}
});
// Smooth scroll to top
scrollTopButton.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
});✅ Verify Functionality
Open your website and ensure that:- The button appears when scrolling down the page.
- The progress indicator fills up smoothly as you scroll.
- Clicking the button smoothly scrolls the page to the top.