Back to top

A button that allows users to quickly return to the top of the page.

Demo & code

Show code Hide code

Usage

A back to top button provides an easy way to return to the top of the page, without having to manually scroll.

use the back to top component when there is a lot of content on the page, such as articles, blogs, or listings.

Don't

use it on pages that are short that have a minimum amount of scrolling
use it if there is already a way to return to the top of the page, such as a fixed in-page navigation menu
use it if the 'back to top' button creates confusion or adds unnecessary clutter

How this component works

The back to top button appears when users want to scroll up, making it visible only when necessary.

On mobile and smaller screens, the icon turns into an upward chevron and the text becomes 'Top' below the icon to save space.

Scrollable distance

By default the back to top button appears when users start scrolling up, signaling an intention to return to the top. However, if you want the button to appear when users have scrolled down a certain distance you can use the data-offset attribute.

Scrollable element

By default, the visibility of the back to top button is toggled by the scrolling on the window element. If you have a different scrollable element in your page, you can use the data-element attribute to pass the CSS selector of the scrollable element.

For example, if you have a <main class="main-element"> with a height: 100vh and overflow: auto, you can set data-element='.main-element'

Accessibility

All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.