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 mostly bad practice, especially for accessibility reasons. It also discusses the techniques creating such links in a manner that minimizes the damage. Such techniques may sometimes be useful for long documents, since many browsers on touch screen devices have no built-in tool for moving to the top.
Most browsers have some built-in tool for moving
to the start of the current page (e.g., using the Home key).
By creating your own imitation of such functionality, you confuse people who
may think they need to use it and not the browser tool.
This used to be browser practice for a long time; now,
browsers on touch screen devices often lack such control.
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, on a typical browser on a desktop computer, to get to the start of the current document, 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, once wrote an alertbox where he claims that links to destinations within the same page should generally be avoided. He has now modified this, on page Anchors OK? Re-Assessing In-Page Links. However, he still 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="topl" align="right"><a href="#">Start of page
<img alt="" src="up.gif" width="13" height="12" border="0"></a></div>
Notes:
div element with a class,
making it easy to style it. For example, you could reduce the font size
somewhat and add some margin below the link.
alt attribute,
because it needs no replacement in a presentation without images—the
link text is informative as such.
href value of "#", which by definition
means the start of the current document. Thus there is no need to worry
about the correct way of setting up the destination anchor.
However,
a link that refers to "#" may or may not change
focus, depending on browser.
Moreover, some versions of Opera do not support such a link,
though such versions are probably not in use any more.
If you regard either of these as a problem, you can set up an anchor by using
an id attribute in the first element inside the document body.
For example, if the body starts with a 1st level heading, you could use
<h1 id="start">. Then you would naturally use
href="#start" in the link.
In a style sheet, you would have the following, so that the links are omitted when the page is printed:
@media print { .topl { display: none; } }
A different approach is to use a special character, such as an upwards-pointing arrow, and position it in fixed place, perhaps best at the bottom right corner of the page. This technique, shown on this page, uses HTML code like the following:
<div class="toplink" align="right"><a href="#" title="Top of page">⇑</a></div>
.toplink { display: none; }
@media screen {
.toplink {
display: inline-block;
position: fixed;
width: 1.2em;
height: 1.2em;
padding: 0.1em;
border: solid 2px #555;
text-align: center;
vertical-align: middle;
font-weight: bold;
bottom: 0.3em;
right: 0.3em;
}
.toplink a { text-decoration: none; }
Apart from the title attribute, which is just for an advisory tooltip.
this approach is language-independent.