Skip to main content

Back to Top

JSThis component requires JavaScript.
Component status:Beta
The Back to Top component helps users quickly navigate back to the top of long pages of content.

Example#

<button id="bux-back-to-top" class="bux-back-to-top" scrollpages="4">
<i class="bux-back-to-top__icon icon icon-chevron-up"></i>
<span class="bux-back-to-top__text">Back to Top</span>
</button>

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.

When to Use#

It is recommended to only use the Back to Top component for pages that are longer than four pages in length when scrolled. This component can be used globally or on a per-page basis.

Implementation Notes#

  • Only implement one Back to Top component per page.
  • If using globally on the site, it is recommended to place the code near the bottom of the <body> tag just above any scripts.
  • If using on a single page, it is recommended to place this component near the bottom within your main content section.

Settings#

  • While four pages is the recommended starting point for displaying this component, you may occasionally need to override this setting. This can be done via the scrollpages attribute.
  • If the scrollpages attribute is omitted, the script for this component will automatically default to four pages.
  • A setting of scrollpages = "0" will display the component as soon as the user begins scrolling.