Scroll up

Back to top component to be used on longer pages

Scroll up auto display

Displays a link at the bottom right of the page after scrolling down one page height.

Adds a link at the end of the page with the o-scroll-up class. The “Back to top” text is only shown on desktop display — but you can change the breakpoint in the d-{breakpoint}-inline-block utility. The arrow up icon is added via CSS. For accessibility reasons, add a title to the link that’s consistent with text content.

<a href="#" class="o-scroll-up" title="back to top">
  <span class="d-none d-sm-inline-block">Back to top</span>
</a>

Scroll up static

Displays a static “Back to top” link, by adding it in the page with the o-scroll-up and static class.

<a href="#" class="o-scroll-up static" title="back to top">
  <span class="d-none d-sm-inline-block">Back to top</span>
</a>

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-target="#anchor".

Name Type Default Description
target string null Allow you to specify a query selector of the custom top of the page. If it's set the go back to top action will scroll into the view to this anchor instead of positionning the offset top to 0