Skip to main content

Back to Top

JS
Ready
A shortcut button that helps users quickly navigate back to the top of long pages of content.

As the user scrolls down the page, the Back to top component reveals as a sticky element in the lower right of the main content area. Clicking the button takes the users to the top of the page.

The Back to top component is anchored to the lower right side of the main content area at all breakpoints. The button text will be visually hidden at the sm breakpoint.

Example​

<a href="#top" id="bux-back-to-top" class="bux-back-to-top">
  <span
    class="bux-back-to-top__icon icon icon-jump-top"
    aria-hidden="true"
  ></span>
  <span class="bux-back-to-top__text">Back to top</span>
</a>

Usage​

Dos​

  • Use for pages that are longer than two screens on large and medium screens and four screens in length on small screens. If pages are short, Back to Top is not necessary.
  • Anchor the Back to top component to the lower right edge of its parent container (the main content area) on desktop, and the lower right edge of the viewport on a smaller device

Don’ts​

  • Don’t use for pages that are short

Implementation Notes​

  • Only implement one Back to Top component per page
  • The component uses JavaScript to apply bottom padding to the Back to Top component's immediately previous sibling. This prevents the button from hiding page content
  • It is recommended to place the component code directly after the <footer> tag and above any scripts at the end of the page

References​

Back to top