Back to top
The Back to top component helps users quickly navigate back to the top of long pages of content.
Focus should properly set on the
body tag when users click the Back to top button. Users should be able to set focus on the first link or button from the top of the page after pressing TAB.
When to use the On this page jump link component
Use the Back to top component for pages that are longer than 4 screens
When to consider something else
If pages are short, a back to top component isn’t necessary as a user can simply scroll.
Usability guidance: how to use it
- The Back to top component is anchored to the lower right side of the main content area on desktop, and the lower right side of the viewport on smaller screens
- Have one sticky Back to top component per page instead of including multiple links in every section of the page
- On desktop, the back to top component will have the label, “Back to top” with an arrow icon on the right hand side
- On mobile, the back to top component will be the arrow icon