Sections

Content

Layout

Navigation

Back to Top links

On pages with a lot of content, Back to Top links provide a convenient way for customers to return to the top of the page.

Links can be presented as buttons and within other elements. On pages with a lot of content, links can be included within section headings.

Link in heading 
  • <h2 class="flex align-items-baseline justify-content-between pb-2 my-4 border-bottom">
  Section title
  <a class="font-size-base" href="#page-container">
    Back to top
    <svg class="svg-icon text-inherit fill-current" viewBox="0 0 324 423" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <path d="M317,177 C312,182 307,184 301,184 C296,184 290,182 286,177 L184,76 L184,401 C184,413 174,423 162,423 C150,423 140,413 140,401 L140,76 L38,177 C30,186 16,186 7,177 C-2,169 -2,155 7,146 L146,7 C155,-2 169,-2 177,7 L316,146 C326,155 326,169 317,177 Z"></path>
    </svg>
  </a>
</h2>

Small screen sizes

You may choose to display links only on small screen sizes by using our responsive display utilities.

Link visible only on smaller screens Get code

Reveal on scroll

Links can also adopt a fixed position on the screen (for example, the bottom-right) and revealed when the visitor scrolls beyond a certain position on the page. The pattern below also contains custom JavaScript to smooth scroll the page back to the top.

Fixed position link, visible on scroll Get code

Sticky Table of Contents can also be used to provide visitors with information about where they are on the page and a means of easily navigating between sections.