Back to top
Sample HTML
<div class="ds_back-to-top" data-module="ds-back-to-top">
<a class="ds_back-to-top__button">Back to top
<svg class="ds_icon ds_back-to-top__icon" aria-hidden="true" role="img">
<use></use>
</svg></a>
</div>
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 text says what the component does in plain English
- the background of the link is semi-transparent, so that it does not completely cover content beneath
- 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.
Performance data
On mygov.scot users mostly click the back to top link on mobile devices (92% of clicks). It is more often clicked on longer pages with an average read time of 2 minutes 22 seconds (compared to the site average of 1 minute 36 seconds).
Best practice
We referred to the best practice guidance for back to top links from the Nielsen Norman Group when developing this component.
Website analytics
You can track back to top link clicks through the original page path and a data attribute describing the action.
The data attribute is added automatically by the Design System’s ‘tracking’ script.
Accessibility
We designed the back to top component to be accessible to all types of users. It uses the interactive states and focus states described on our accessibility page and our focus states page.
The back to top link is focusable and users can trigger it with the enter key, like any other link. It will take users back to the top of the current page.
Implementation
The back to top component should be placed after the article content but above the footer.
The back to top link’s target (element with id="page-top"
) should be placed after any site-wide notification banners, so users of screen readers will not encounter that content again.
The component uses JavaScript to calculate its bottom position, just above the footer.
Set up a ‘back to top’ by creating a new BackToTop
object. It takes three parameters:
- the DOM element of the back to top button
- the window object
- an optional object of customisation settings
The customisation settings can have the following property:
footerElSelector
: a CSS selector for the footer element. If this is not specified, the default of.ds_site-footer
will be used.
Example JavaScript
const backToTop = new window.DS.components.BackToTop(
document.getElementById('my-back-to-top'),
window,
{
footerElSelector: '.my-footer-element'
}
);
backToTop.init();
Live example
Marriage in Scotland (mygov.scot)
Feedback, help and support
If you need help or support you can e-mail us at designsystem@gov.scot
There is a problem
Thanks for your feedback