“Back to Top” links considered harmful

Web pages often contain links to the start of the page, typically named “Back to Top” and possibly accompanied with icons such as an arrow pointing upwards. This document explains why such usage is bad practice, especially for accessibility reasons. It also discusses the techniques creating such links in a manner that minimizes the damage.

Admittedly, the Home key (or equivalent) typically does not change focus. This means that when you press the tab key, you move to the link (or form field) following the one that was focused on. This can be inconvenient if you would like to use the tab key for navigation, but in such a case, the “Back to Top” links are a particular nuisance. On the other hand, the non-focusing behavior can be useful: you might wish to jump to the start of a page to check something there, then proceed from the link (or field) where you were.

In duplicating a basic functionality of browsers, the “Back to Top” links are comparable to “Print this page” and “Bookmark this page” links and links or menus for changing font size. However, these are all different widgets, with partly different drawbacks (and some potential or claimed benefits). The fundamental issue is still whether web pages should create user interfaces in this sense, instead of accepting that they will be viewed (or otherwise experienced) in different browsing situations.

Although some users like and use “Back to Top” links and other duplication of browser functions, they are the wrong way to go. Such users are typically ignorant of the built-in functions, which would help them on all pages in a uniform way.

Duplication might not be such a bad thing in itself. In fact, browser functions can often be invoked using different methods. For example, to get to the start of the current document on Internet Explorer, I can use the Home key, or I can use the scroll bar to scroll to the top, or I can use the Page Up key as many times as needed. When a page contains yet another method for jumping to the start, how can the user know what it really does? There is no guarantee that it has the same effect as the Home key, for example. Actually, there are differences; for example, “Back to Top” might not jump to the very top but somewhere near to it, and as mentioned, the focusing behavior can be different. There is no guarantee that similar-looking links to the start on different pages have the same effect.

Jakob Nielsen, the usability specialist, has written an alertbox where he claims that links to destinations within the same page should generally be avoided: Avoid Within-Page Links. Nielsen says that such links break the mental model of link following. “Back to Top” links are however a different case, since the user probably does not expect a new page to load and the current page fade away. However, the general point about conceptual clarity and practical simplicity is worth noting:

Links work best when they are references from one page to another, rather than within-page links.

If you use “Back to Top” links, the following is a reasonably harmless method:

<div class="toplink" align="right"><a href="#">Start of page <img alt="" src="up.gif" width="13" height="12" border="0"></a></div>

Notes:

In a style sheet, you would have the following, so that the links are omitted when the page is printed:

@media print { .toplink { display: none; } }