Bootstrap 5 scroll utilities — fixed buttons and progress indicators. This page covers 4 patterns — basic scroll-to-top, progress ring button, reading progress bar and expandable FAB.
Core Pattern
// Show button after scrolling 200px
window.addEventListener('scroll', () => {
const btn = document.getElementById('scrollBtn')
btn.classList.toggle('visible', window.scrollY > 200)
})
// Reading progress
window.addEventListener('scroll', () => {
const pct = window.scrollY /
(document.body.scrollHeight - window.innerHeight) * 100
bar.style.width = pct + '%'
})
1. Bootstrap 5 Basic Scroll to Top Button
Fixed round button that appears after scrolling 200px and smoothly scrolls back to top.
2. Bootstrap 5 Scroll Progress Button
Scroll-to-top button with a circular progress ring showing reading progress.
3. Bootstrap 5 Reading Progress Bar
Horizontal progress bar fixed to the top of the page showing scroll progress.
4. Bootstrap 5 FAB with Multiple Actions
Floating action button that expands to reveal multiple quick action buttons on click.
Frequently Asked Questions
Add a fixed-position button (position:fixed; bottom:24px; right:24px). Start hidden with opacity:0. On scroll event show it when window.scrollY > 200 by adding an opacity:1 class. On click call window.scrollTo({top:0, behavior:'smooth'}) for smooth scrolling.
Use CSS transitions on opacity and transform: transition: opacity 0.3s, transform 0.3s. Start with opacity:0; transform:scale(0.8). Apply the visible state with opacity:1; transform:scale(1). This creates a smooth fade-in and scale-up effect.
Add a fixed-top div with height:3px and width:0%. On scroll: width = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100 + '%'. Set transition:width 0.1s for smooth updates. Use a brand color for the progress fill.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.