Back to Top Button

The Back to Top Button allows users to return to the top of the page.

On this page:

Best Practices

Insert it at the bottom of the root element in the page.
Don’t remove the text in the button. Screen readers need it.
It appears after the user has scrolled down, usually four times the height of the screen’s initially-visible portion.
The href of the button should be the id of the <main> element.

Usage

<a id="ScrollToTop" href="#main" class="btn btn-accent btn-sm btn-scroll-top">
  <span class="icon fas fa-arrow-up" aria-hidden="true"></span>
  <span>Page top</span>
</a>

Resources

Bootstrap Documentation - Buttons

Page top