Skip to main content

Back to top

Back to top provides a simple way for a user to quickly go to the top of the page they are viewing without scrolling. The module only displays when the user has scrolled down to at least two times the viewport height, otherwise, the module is not visible. Currently, Back to top does not show on mobile viewports (less than 768px wide).

Accessibility Requirements: The first element inside the main content should include an ID linked to the href. The ID should not be placed on the main content container as a screen reader will proceed to read the entire document, making it difficult for users to interact with links, forms, and other elements inside the container. Linking to the first element inside the main content area ensures that users can interact with all elements on the page once again.

Example

Please click "Preview" link below to see example

Best practices

Use on content-heavy pages that require scrolling.

Do

  • Place the back to top module on long pages that scroll.

Don’t

  • Don’t use on pages which don’t scroll.
  • Don’t use back to top as a way to link to other parts of the page.

Also known as

Scroll-to-top

Related

Scroll

Development

  • Schema definition: The back-to-top schema defines the acceptable configurations, requirements, and options for each module.

Code and preview

Default back to top

<a href="#foo" class="m-back-to-top" aria-disabled="true">
    <div class="c-glyph glyph-up" aria-label="Back to top"></div>
</a>

Preview