Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Components

Back to top

The Back to top component helps users quickly navigate back to the top of long pages of content.

See this in Storybook

Usability

When to use the Back to top 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.

How to use Back to top component

  • 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

Accessibility considerations

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.

Edit this page in GitHub (Permissions required)