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 hidden text for screen readers.
  • 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.
  • Follow the guidance in the Icon-Only Button.

Usage

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

Resources

Previous page
Next page