“Back to Top” links considered (mostly) 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 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.

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.

A simple Top of page link

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>
Start of page


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 Top of page link using an arrow character

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>
And CSS code like this:
.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.

Date of creation: 2006-01-12. Last modified 2023-02-22-
This page belongs to section Web authoring and surfing of the free information site IT and communication by Jukka "Yucca" Korpela.