Skip to content
Skip to content

Back to top

Link that takes the user back up to the top of the page.


Usage

<a href="#top" class="c-button c-button--icon c-back-to-top">
  {{ icon('chevron-up') }}
  <span class="c-back-to-top-text">Back to top</span>
</a>

<a href="#top" class="c-button c-button--icon c-back-to-top c-back-to-top--fixed">
  {{ icon('chevron-up') }}
  <span class="c-back-to-top-text">Back to top</span>
</a>

'Fixed' modifier

By attaching the 'fixed' modifier (.c-back-to-top--fixed) the component is positioned fixed to the bottom of the browser window (as you can see in the example in the bottom corner of the screen).