Skip to main content Red Hat Design System logo Contribute on Github

Back to top

Overview Style Guidelines Code Demos Accessibility

Usage

A back to top button helps users get back to the top of the page quickly. It should be used on pages where a user would have to scroll through two screens worth of content on medium and large screens and four screens worth of content on small screens. If a page is very short and doesn’t require scrolling, a back to top button doesn’t have to be added.

Layout

Placement

Users expect to see the back to top button in the bottom right corner. It will overlap any page content in that small area. This placement keeps it out of the way of page content but still discoverable.

On mobile, the element should be positioned 24px from the bottom and from the right of the screen. On screens wider than 768px, it should appear 48px from the bottom and from the right.

Back to top buttons in the bottom right corner of a desktop-sized screen Back to top buttons in the bottom right corner of a phone-sized screen

Behavior

When a user scrolls down the page, the back to top element appears in the bottom right corner. As the user continues to scroll, the element should remain stationary, unless the user has scrolled to the top of the page.

Once the user clicks the back to top button, they will be taken to the top of the page.

Best practices

One back to top element per page

Having only one persistent back to top button ensures that users are able to scroll up to the top easily. Having “Back to top” buttons at the bottom of multiple sections adds to visual clutter and may lead to users ignoring the button.

Image of wireframe with one back to top button

Have one back to top button in the bottom right corner of the page.

Image of wireframe with back to top buttons below each content section

Do not use multiple back to top buttons.

“Back to top” text

We recommend retaining the “Back to top” text to ensure that users understand the button’s purpose.

Image of back to top button with “back to top” text and icon

Keep the descriptive “Back to top” text in the button.

Image of back to top button with icon only

Do  not use only an up arrow icon.

Spacing

Ensure that there is enough space between the button and the edges of the page for users to click it easily at any screen size. In addition to making it easier for users to click, this will also prevent the scrollbars from overlapping the button.

Image of back to top button enough spacing from scroll bars

Add ample space between the right and bottom edges.

Image of back to top button with very little spacing next to scrollbars

Do not place the button too close to the edges of the screen.

Other libraries

To learn more about our other libraries, visit this page.

© 2021-2024 Red Hat, Inc. Deploys by Netlify