Components menu
Back to top
A link that allows users to quickly navigate back to the top of the page with a single click. The link improves navigation for users on long pages of content and on mobile devices.
About this component
The back to top link works on desktop and on mobile content items. It appears when the user is interacting with a long page of content. It’s a shortcut that allows users to quickly navigate back to the top of the page.
We designed our back to top component so that:
- it appears when the user begins to scroll down the page
- it is fixed in the lower-right of the browser window
- the link is small so it does not cover important content on the page but large enough that the touch area can be easily tapped on mobile
When to use this component
Use the component on pages where the main purpose of scrolling up the page is to access common features found at the top of the page (for example, search or top level navigation).
It is particularly useful on any long content pages.
HTML
<aside>
<button type="button" class="back-to-top--button btn btn-floating" id="back-to-top--btn">
<div class="visually-hidden"> Back to top </div>
<i class="back-to-top--icon fa-solid fa-arrow-up" aria-hidden="true"></i>
</button>
<aside>
<script type="text/javascript" src="js/back-to-top.js"></script>
CSS
/* Back to top
------------------------------------ */
#back-to-top--btn {
position: fixed;
bottom: 10px;
right: 20px;
display: none;
z-index: 9999;
}
.back-to-top--button {
color: var(--scottish-teal);
background: #ffffff;
border: 1px solid var(--scottish-teal);
border-radius: 0;
font-size: 1rem;
line-height: 1.5;
padding: 5px;
}
.back-to-top--button:hover {
background: var(--verdant-green);
color: #000000;
}
.back-to-top--button:focus {
background: var(--grey-three);
color: var(--scottish-teal);
}