The Back to Top component provides a simple link that takes the user back to the top of the page content. It is useful for breaking up long pages into multiple sections, allowing the user to easily return to page top and navigate elsewhere on the site.

Example

Back to Top

<p class="back-to-top">
  <a class="back-to-top__link" href="#main-content">
    Back to Top
  </a>  
</p>

Where to use

Back to top links should be used at the end of a section on very long pages. If the pages has numerous sections that the user can jump to from anchor links at the top of the page, then the Back to Top component should be used at the end of each section, making it easier for a user to get back to the section navigation at the top of the page.