Bootstrap 5Utilities

Bootstrap 5 Scroll To Top

A Scroll To Top button is a fixed-position UI element that appears after the user scrolls down a certain distance, allowing them to return to the top of the page with a single click. In Bootstrap 5, it is typically built using fixed positioning utilities, visibility toggling via JavaScript, and smooth scroll behaviour. It is most useful on long-form pages where repeated scrolling would otherwise frustrate users.

Primary Class

.scroll-to-top

Common Use Cases

→Long editorial or blog pages with 2000+ words where readers finish an article and want to navigate the header menu without manual scrolling
→E-commerce category pages with 40+ product listings loaded via pagination or infinite scroll, where the filter sidebar is anchored at the top
→Documentation or knowledge base pages with multiple sections and a sticky table of contents that users need to revisit frequently
→Single-page marketing sites with multiple full-height sections where anchor navigation is the primary wayfinding mechanism

Variants & Classes

Variant	Description	Classes
Scroll To Top Default	Standard scroll to top with Bootstrap's default styling.	`scroll-to-top`
Scroll To Top Responsive	Responsive variant that adapts to different screen sizes.	`scroll-to-top scroll-to-top-responsive`

Code Example

<!-- Scroll To Top Button -->
<button
  id="scrollToTopBtn"
  class="btn btn-primary rounded-circle position-fixed bottom-0 end-0 m-4 d-none"
  style="width: 48px; height: 48px; z-index: 1050;"
  aria-label="Scroll 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="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z"/>
  </svg>
</button>

<!-- Scroll Visibility Script -->
<script>
  const scrollBtn = document.getElementById('scrollToTopBtn');
  window.addEventListener('scroll', () => {
    if (window.scrollY > 300) {
      scrollBtn.classList.remove('d-none');
      scrollBtn.classList.add('d-flex', 'align-items-center', 'justify-content-center');
    } else {
      scrollBtn.classList.add('d-none');
      scrollBtn.classList.remove('d-flex', 'align-items-center', 'justify-content-center');
    }
  });
</script>

Live Examples

Basic Scroll To Top

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated scroll to top with custom colours
✓Scroll To Top with interactive states
✓Responsive scroll to top for all screen sizes

Best Practices

Use a scroll threshold of 300px, not 0

Triggering the button immediately on any scroll creates visual noise above the fold. A 300px threshold ensures the button only appears once the user has genuinely moved away from the top of the page.

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.

Add a CSS transition for smooth visibility changes

Instead of a hard show/hide toggle, apply opacity and transition properties in CSS so the button fades in and out, which reduces the jarring effect of it appearing suddenly mid-scroll.

Always include an aria-label

Icon-only buttons have no visible text, so screen readers will announce nothing meaningful without an aria-label. Set aria-label="Scroll to top" to ensure accessibility compliance with WCAG 2.1 Success Criterion 1.1.1.

FAQ

How do I control exactly when the Scroll To Top button appears?

The appearance threshold is controlled by the scroll event listener in JavaScript. The value checked against window.scrollY determines when the button becomes visible. For a 300px threshold, the condition is window.scrollY > 300. For pages with a tall hero section, you may want to increase this to match the hero height so the button appears only after the hero is fully out of view. You can also use IntersectionObserver to watch a specific element — such as the hero section — rather than relying on a fixed pixel value.

How can I change the button colour and shape to match my brand?

Replace btn-primary with any Bootstrap contextual class such as btn-dark or btn-secondary, or apply a custom background colour using Bootstrap's bg utility classes alongside text-white. To make it fully circular regardless of padding, set equal width and height values and apply rounded-circle. For a square with rounded corners instead, use rounded-3 or rounded-2. If you need a brand-specific hex colour not in Bootstrap's palette, add a style attribute directly or override the --bs-btn-bg CSS variable in your stylesheet.

How does Canvas Builder generate a Scroll To Top button?

When you describe your page in Canvas Builder, it automatically includes a Scroll To Top button on any page exceeding a standard content threshold. The generated button inherits your chosen brand colour from the Canvas HTML template's CSS variable system, so it matches your primary palette without manual overrides. The output is fully responsive, with adjusted positioning for mobile viewports, and includes the aria-label and JavaScript scroll listener out of the box — no additional configuration needed.