Back to Top

The back-to-top component triggers the scrolling to the top of the page.

How to

The Back to Top component brings the user back to the top of the page, in the assumption they will find there the main website navigation.

You can edit the following data attributes to affect the component behavior:

• data-offset-in: scrolling offset for the button to be visible, set in px;
• data-target-in: show the button when a specific element leaves the viewport; set the attribute equal to a unique selector of the target element; it can be combined with the data-offset-in attribute;
• data-offset-out: hide the button after window has scrolled of a specific amount of pixels; 
• data-target-out: hide the button when a specific element enters the viewport; set the attribute equal to a unique selector of the target element; it can be combined with the data-offset-out attribute.

Scrollable Element #

By default, the visibility of the back to top button is toggled by the scrolling on the window element. If you have a different scrollable element in your page, you can use the data-element attribute to pass the CSS selector of the scrollable element.

For example, if you have a <main class="main-el"> with a height: 100vh and overflow: auto, you can set data-element='.main-el':

<a data-element=".main-el" class="back-to-top js-back-to-top" href="#">
  <!-- ... -->
</a>

Categories

• Navigation > Misc

Bug report & feedback

Component Github page ↗