Back to top

Skip to page content

BETA

Introduction

An example of the back to top component.

Top of page

Interactive example

Component variants

There are two variants of the back to top component:

Default
Icon-only

When to use

Default

Use this component for pages with a lot of content that requires scrolling, such as intranets, reports and content-heavy apps.

Consider using it on all apps to improve usability for everyone, including keyboard-only and some assistive technology users.

An example page that is scrolled half way down and showing an overlaid back to top button in the bottom right-hand side.

Display the back to top button when a page has been scrolled.

Icon-only

The icon-only back to top button should be used when a page is zoomed, to minimise overlapping content.

Use the icon-only variant when zoomed to reduce overlapping content.

When not to use

Don't use when the page is designed to fill the viewport without scrolling.

Don't display the back to top button when the page is already scrolled to the top.

An example page that fits within the viewport without scrolling. A back to top button is overlaid in the bottom right-hand side.

Don’t show a back to top button when the page does not require scrolling, or is already scrolled to the top of the page.

Only use the provided back to top component. Don't use any other button in place of the back to top component.

An example page that is scrolled half way down and displays a primary button reading ‘Back to top’ in the bottom right corner instead of the back to top component.

Don’t use any other component for providing back to top functionality. Use the back to top button.

Avoid using the default back to top button when zoomed, as it may obscure important page content. The icon-only back to top button should be used instead.

An example page that is scrolled halfway down and zoomed in, with a default variant back to top button in the bottom right corner that obscures some of the text on the page.

Avoid using the default variant where it may obscure important page content.

Interaction behaviour

The back to top button targets themain region in your code.

Avoid setting focus to the top of thebody because users will have to navigate through the header and navigation.

Layout and placement

Don’t place the back to top button anywhere else as it may obscure important information or interactive components.

An example page that is scrolled halfway that shows a back to top button overlaid in the bottom left-hand corner of the screen. The button obscures a list of filters that appear behind it.

Don’t show the back to top button anywhere other than the right-hand side as it may obscure other content.

When the bottom of the page is reached, the back to top button anchors into place above the footer .

An example page that is scrolled all the way to the bottom showing a footer component with the back to top button positioned above it.

The back to top button anchors above the footer when scrolled to the bottom of the page.

Motion

When clicked, the component should navigate to the top of the page without any scrolling animation.

Last reviewed 3 February 2023 .