Bootstrap 5 Back to Top Button
A Back to Top button (also called a scroll 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.
Bootstrap class
No dedicated Bootstrap class
Common 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 and classes
| Variant | Description and classes |
|---|---|
| Fixed circular button | Round icon button anchored to the bottom-right corner.btn btn-primary rounded-circle position-fixed bottom-0 end-0 m-4 |
| Appears after scrolling | Starts hidden with d-none; a small scroll listener removes it after about 300px.d-none |
| Pill with label | Text plus icon for clearer meaning on long articles.btn btn-dark rounded-pill shadow |
| Plain anchor link | A link to #top that works without JavaScript.btn btn-outline-secondary + href="#top" |
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
Back to top button in a scrolling panel
Scroll the panel: the button appears after 120px and smooth-scrolls back up. On a real page, listen to the window's scroll event instead (see the code example).
Canvas template variants
Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:
- 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.
Avoid overlapping fixed footer elements on mobile
If your layout includes a fixed bottom navigation bar, increase the bottom offset using a custom utility or inline style (for example, set bottom to 72px) so the button does not sit on top of critical navigation controls on small screens.
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.
FAQ
Does Bootstrap 5 include a built-in Back to Top button component?
position-fixed, bottom-0, end-0, shadow, btn, and rounded-circle utilities let you assemble one in a few lines of HTML. The scroll-detection logic requires a small vanilla JavaScript snippet (~5 lines), which does not depend on jQuery or any third-party library.How do I control exactly when the back to top button appears?
How do I customise the button colour to match my brand?
btn-primary for any Bootstrap contextual class (btn-dark, btn-secondary, btn-light) or override Bootstrap's CSS variables directly: style="--bs-btn-bg: #your-hex; --bs-btn-border-color: #your-hex;". For a theme-wide change, override $primary in your Bootstrap Sass source before compiling, so every btn-primary instance updates simultaneously.