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>
<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