Back to Top

A Back to Top link helps users navigate to the top (start) of long pages.

Behavior of a Back to Top link

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 to create the Back to Top link

<html id="start">
  <body>
  <!-- the contents of the page -->
  <a href="#start" id="back-to-start">Back to Top</a>
  </body>
</html>

JavaScript to hide the link on shorter pages

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

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

Comments