Footer

The Back to Top system provides reusable components for returning visitors to the top of the page. It supports both inline links placed within page content and an optional fixed button that appears after the visitor has scrolled down the page.

The system consists of three components:

• Navigation - Back to Top Anchor — defines the top destination and controls when the fixed button becomes visible.
• Navigation - Back to Top Link — reusable Back to Top link that can be placed inside a button, text link, or other suitable wrapper.
• Navigation - Back to Top Fixed — fixed-position Back to Top button that appears after the animation anchor enters the viewport.

Navigation - Back to Top Anchor

Place the Navigation - Back to Top Anchor component at the top of the page.

The component contains two anchors:

#top
Defines the destination used by Back to Top links. Elements using Navigation - Back to Top Link component links to this ID to return the visitor to the top of the page.

#top-animation
Controls when the fixed Back to Top button appears.

The animation anchor uses the back-to-top-anchor-animation class and is positioned absolutely inside the top anchor. Its left, right, and bottom positions are set to 0, while its top position defines how far down the page the fixed button should begin appearing.

By default, the top position is set to 150vh. Because the animation anchor extends downward from this point, it enters the viewport only after the visitor has started scrolling. When #top-animation enters the viewport, the interaction reveals the fixed Back to Top button.

Adjust the top position of back-to-top-anchor-animation if the fixed button should appear earlier or later while scrolling.

‍

Navigation - Back to Top Link

Use Navigation - Back to Top Link when a Back to Top control should be placed directly within the page layout, such as inside the Footer.

The component can be placed inside a compatible button or link wrapper and is available in the following variants:

• is-full — icon and text
• is-text — text only
• is-icon — icon only

The link targets #top, returning the visitor to the Back to Top anchor at the top of the page.

This component is independent of the fixed-button animation and can be used anywhere an inline Back to Top option is needed.

‍

Navigation - Back to Top Fixed

Use Navigation - Back to Top Fixed when a Back to Top button should remain fixed to the viewport after the visitor scrolls down the page.

The component contains separate wrappers for positioning and animation:

Position Wrapper
The back-to-top-fixed-position element controls where the button is positioned within the viewport. Adjust its positioning styles to place the button in the desired corner or viewport location.

Animation Wrapper
The back-to-top-fixed-animation element controls the hidden and visible states of the fixed button.

The fixed button is hidden by default. When #top-animation enters the viewport, the Back to Top interaction changes the animation wrapper to its visible state and plays the entrance animation.

The visible example shown in the Style Guide includes the Current state only to demonstrate the active appearance.

‍

Setup

Add Navigation - Back to Top Anchor at the top of every page where the system will be used.

Use Navigation - Back to Top Link anywhere an inline Back to Top control is needed.

Add Navigation - Back to Top Fixed when a viewport-fixed Back to Top button is required.

Both the inline and fixed versions return the visitor to #top, while #top-animation is used only to determine when the fixed button should appear.