Design
Research and rationale
That design of our 'back-to-top' component is based on recommendations from the Nielson and Norman group which state that it should be visible but unobtrusive, easy to spot and not distract from the main content of the page. It's best to keep it small, but with a high contrast colour or icon that stands out. (Loranger, H 2017).
Research also suggested that the meaning of the arrow icon alone is too obscure which is why our back to top button includes the words back-to-top as well as an icon (Loranger, H 2017).
Placement of this button is in the bottom right corner, this was the most consistent approach we found across websites that implement this component (Loranger, H 2017).
We originally used a fixed position for the 'Back to top' button so it always appeared in the bottom-right corner of the screen. However, accessibility testing revealed that fixed-position elements can affect users who rely on browser zoom and make it difficult for sighted keyboard users to read or interact with content hidden behind these elements.
To improve accessibility, we repositioned the 'Back to top' button to appear visually where it naturally occurs in the focus order—at the end of the <main> element. The best placement was just above the footer, aligned to the bottom-right corner of the page within the layout grid.
Future update
In line with best practices for user experience, as outlined by the Nielsen Norman Group (NNG), we will be updating the current 'Back to top' functionality on this site. Currently, the "Back to top" button uses an anchor link ( <a href="#content"> ) to scroll users to the top of the page. However, based on NNG's guidelines, it is recommended that the 'Back to top' button behave more like a command rather than a standard link.
As part of our upcoming updates, we plan to transition this functionality to a JavaScript-based solution. This will ensure that when users press the browser’s 'Back' button, they are correctly navigated to the previous page in their browsing history, instead of being taken to the bottom of the current page (Schade A, 2017).