Back to top

Back to top is a navigation button that allows users to quickly revert back to the top of a particular web page. This element is shown in the bottom right corner of the page or mobile screen. The element only appears when the user scrolls a certain distance down the web page.

Back to top buttons are necessary for web pages with continuous scrolling, or a page that includes a long amount of content. A good guideline is to include a Back to top button for any web page that is longer than 4 screens.

Back to top buttons are a custom component built for Aurora. Back to top buttons include a web and a mobile version. Use the class .btn-backtotop to create the button, the .mobile class can be added to create the mobile version. Note that the mobile version will require an icon.

In the mobile version, be sure to use the .sr-only class to provide context for the button.
Back to top

<a href="#main-content" class="btn btn-backtotop"><i class="fa fa-arrow-up icon"></i>Back to top</a>

<a href="#main-content" class="btn btn-backtotop mobile"><i class="fa fa-arrow-up icon" aria-hidden="true"></i><span class="sr-only">Back to top</span></a>

This button should always be labelled Back to top since this is the most descriptive and expected label for the function.

Web: The text Back to top is styled using button text (Nunito Sans Bold, 14px), with the colour #666666.

The text has a 9px by 15px padding with a 1px border colours #CECECE and a border radius of 16px. The arrow icon is aligned to the left of the text.

Mobile: White circle with a radius of 43px. Border is 1px #CECECE. Drop shadow of #000000 20% opacity, 0 offset for x, 2px offset for y, 2px blur.

There is an arrow icon centred in the circle (Arrow up from Font Awesome). The arrow is coloured #666666.