Back to Top

A Back to Top link helps users navigate to the top (start) of long pages.
  • The link is only necessary on longer pages that require scrolling to get back to the top of the page. Shorter pages should not contain a Back to Top link, because clicking on such link doesn´t have an effect and is irritating the user.
  • Users expect to see the link at the bottom right corner of the screen.
  • The link should be labeled Back to Top because that´s conveying clearly what the link will do. An icon alone, like an arrow-up, is not sufficient because it cannot be handled properly by a screenreader.
  • The link should stand out visually but shouldn´t distract from content, nor hide content.
  • The link has to be presented to all users and, if not visible, like on a short page, it has to be invisible for all users.
  • Once visible, the link should not move around when scrolling.
<html id="start">
<body>
<!-- the contents of the page -->
<a href="#start" id="back-to-start">Back to Top</a>
</body>
</html>
function maintainBackToStartVisibility() {
let backToStart = document.getElementById('back-to-start');
if (backToStart) {
let windowHeight = window.innerHeight;
let documentHeight = document.body.scrollHeight;

if (windowHeight * 1.5 < documentHeight) {
backToStart.style.display = '';
} else {
backToStart.style.display = 'none';
}
}
}

addEventListener('load', event => maintainBackToStartVisibility());
addEventListener('scroll', event => maintainBackToStartVisibility());
addEventListener('resize', event => maintainBackToStartVisibility());

References #

  1. CSS-Tricks, Chris Coyier Need to scroll to the top of the page?
  2. Nielsen Norman Group, Back-to-Top Button Design Guidelines