Bootstrap 5 Back to Top Button
A Back to Top button is a fixed-position UI element that appears after the user scrolls past a threshold, allowing them to return to the top of the page with a single click. Bootstrap 5 doesn't ship a native Back to Top component, but it's trivially built using Bootstrap's utility classes alongside a small JavaScript snippet for scroll detection and smooth scrolling. Use it on any long-form page — documentation, blog posts, landing pages, or product listings — where users would otherwise need to manually scroll back.
Primary Class
.back-to-topCommon Use Cases
- →Long-scroll product category pages on e-commerce sites where users filter and browse dozens of items before wanting to reset their view
- →Documentation or knowledge base pages with multiple sections, where the button helps users return to the table of contents quickly
- →Blog articles or editorial content exceeding 1500 words, where the button reduces friction after readers reach the end
- →Single-page applications with anchor-based navigation, where the Back to Top button acts as a reliable fallback to the hero section
Variants & Classes
| Variant | Description |
|---|---|
| Back to Top Button Default | Standard back to top button with Bootstrap's default styling. |
| Back to Top Button Responsive | Responsive variant that adapts to different screen sizes. |
Code Example
<button id="backToTop" class="btn btn-primary rounded-circle position-fixed bottom-0 end-0 m-4 shadow d-none" style="width:48px;height:48px;z-index:1050;" aria-label="Back to top" onclick="window.scrollTo({top:0,behavior:'smooth'})">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
<path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
</svg>
</button>
<script>
const btn = document.getElementById('backToTop');
window.addEventListener('scroll', () => {
btn.classList.toggle('d-none', window.scrollY < 300);
});
</script>Live Examples
Basic Back to Top Button
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Canvas Builder generated back to top button with custom colours
- ✓Back to Top Button with interactive states
- ✓Responsive back to top button for all screen sizes
Best Practices
Use Bootstrap's position utilities instead of custom CSS
Classes like `position-fixed`, `bottom-0`, and `end-0` combined with margin utilities (`m-4`) are all you need to anchor the button to the viewport corner — no custom positioning CSS required.
Show the button only after 300px of scroll
Triggering visibility before the user has actually scrolled annoys users on short screens. The `d-none` / `classList.toggle` pattern with a 300px threshold is a clean, Bootstrap-native way to handle this without any animation library.
Always include an aria-label
Icon-only buttons have no visible text, so `aria-label="Back to top"` is essential for screen reader users — without it the button is announced as an unlabelled interactive element.
Add a CSS transition for opacity instead of hard show/hide
Replace `d-none` toggling with opacity and pointer-events transitions in a custom class for a smoother UX: `opacity: 0; pointer-events: none;` when hidden and `opacity: 1; pointer-events: auto;` when visible.