Scroll to Top

The Scroll To Top button lets users quickly return to the top of a page to access the site navigation. This component is particularly useful on sites with long pages.

Dos

Use on pages that are longer than 4 full screen heights

Always place the fixed "Scroll to Top" button on the lower right side of the page

Don'ts

Don't use on short pages

Variations

Scroll to Top arrow appears in a fixed position.

Open in a new window Open in Playground

Scroll to Top arrow appears within content, aligned to the right.

Open in a new window Open in Playground

Accessibility

Built in accessibility

Keyboard Accessible

Users are able to use the keyboard to navigate through the scroll to top arrow using the ‘Tab’ key to navigate/focus and ‘Enter’ or ‘Spacebar’ to activate.WCAG 2.1.1: Keyboard This navigation is done in sequential and logical order. WCAG 2.4.3: Focus Order

Hover and Focus State

The scroll to top arrow has its own distinctive styling on hover/focus to provide a visual cue to the user that the element is focused and there is an action that can be taken. WCAG 1.4.13: Content on hover or focus

Color Contrast

A contrast ratio of at least 4:5:1 between text and background color is ensured to enhance readability WCAG 1.4.3: Contrast (minimum)

Responsive

The component scales in relation to the to the screen size to prevent truncating content and reflows properly when zoomed up to 200% without horizontal scrolling WCAG 1.4.10: Reflow

Consistent

Styles are applied to the component consistently including line height, font style, weight, spacing and color of text. WCAG 1.4.12: Text Spacing

Content

Recommended icon dimensions

Desktop

20px × 20px

Mobile

16px × 16px