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 theid
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>