Top of Page

I spent years working on government web sites; a side effect of working in a government town. And if there's one thing the government has it's information. Lots of it. They like to post it to the web in bucketfuls. Of course, with that you'll find long documents.

Inevitably, I'd get asked to pop "Top of Page" links liberally throughout the page. Space them out just far enough that you hoped you never saw two in the window at the same time. The standard template — that every page on every government site is supposed to use — has that link sitting at the very bottom. But I always wondered...

Do we even need them?

I say, no. I feel this way about any feature that serves to mimic something a browser already does. Like print buttons that just execute window.print(). Or bookmark links that were meant to add the page to your browser (I'm not even talking of the multitude of social bookmarking links that have popped their silly heads all over the place). Or back links as if the user never realized how to use that back button in their browser.

But those other "features" are rarely used these days, unlike our friend the "Top of Page" link which I still see all over the place (although admittedly less so in the blogosphere). It's about time to see it fall by the wayside like the rest of them.

Isn't it time we left it behind?

Published October 15, 2006
Categorized as Design
Short URL:


21 Comments · RSS feed
Jonathan Snook said on October 14, 2006

And yes, I've written about this before. Apparently, my thoughts haven't changed much.

Ryan Brooks said on October 14, 2006

I completely agree with the print/bookmark thing... But on the top of page link? I'm somewhat hesitant to write it off.

We have to consider the fact that you, I, and probably most that are in the web community, consider ourselves "power users" - that is, people who are considerably ahead of the curve when it comes to operating our browser. Our visitors, however, are sometimes not quite as adept.

This argument goes to the very roots of the usability discussion. For instance, target="_blank" - a user SHOULD know that they can open their links in a new window, but do they?

Personally, if I see a 'Return to Top of page' link, I find it so outside the scope of how I operate a browser that it rarely registers to click it; even if it seems more logical, since generally it's easier to make a mouse click than shift my hand to the keyboard and press my 'home' button. However, the same argument could be made for the backspace key, rather than hitting the back button.

Now, that's just me. You, or others within the blogosphere, could be entirely different. My point is that perhaps it's not time to write off functionality that could perhaps enhance the way we interact with our browser. I suppose the question becomes instead, where is the line to be drawn?

Ed said on October 15, 2006

I see the 'back to top' feature in the same way as 'skip to content' and other such on-page navigation. Not perhaps useful if there's nothing at the top of the page but certainly a desired function on a mobile device or where content nav is at the top and the page is seriously long with some hefty scrolling involved.

You suggest that browsers have a 'back to top' function but the only way of doing that I'm aware of is pressing the 'Go' button or pressing the 'Home' button. This escapes way too many people in my experience so people just scroll and moan. I see it daily.

Reproducing browser functionality, certainly not, aiding on-page navigation, valid.

Stephen said on October 15, 2006

Personally, I rarely if ever use a "top of page" link, much as with "print this page" links. As Ryan points out though, most of the people reading this blog would probably be considered "power users."

So it comes down to a question of audience (something that your article perhaps hints at with it's acknowledgement that there are less "top" links in the blogosphere).

Regarding "print" links, I used to fight tooth and nail to leave them out. However, after several clients (and their customers) asked with genuine concern how people (i.e. they) would print the page, I realised that "print" links are genuinely helpful for some users.

Even regular users of the web may be used to seeing (and therefore relying on) the "print" link. Just make sure you use unobtrusive JS to create them (but that's another topic entirely).

The same may very well hold true for "top" links. They benefit some users, and will only ever "offend" the few of us who consider these things worth getting worked up over (myself included).

Ed also makes an interesting point about their usefulness within mobile devices, although that doesn't mean the link can't be hidden in a "screen" stylesheet of course.

George said on October 15, 2006

When anchors are used for top of the page links it is HTML rather than a browser function is it not?

I know what you mean about Government websites and I think an ideal world would be to put more information in PDF files and cut down the content.

I can't see this happening so anchors are often the most user friendly way of navigating though enormous pages of content.

It is not an ideal solution though. With improved browser support perhaps new techniques could put an end to the anchor (DOM, AJAX etc).

I'd see this as a major challenge for web designers to solve for information heavy sites. The anchor is old skool.

stephen said on October 15, 2006

I'm not sure that this is the same issue, but there is some similarity:

Whilst thinning out code on one of my sites (down to 10kbs per page) last week it occurred to me that the "top of page" links could just as easily link to the #wrapper or #header - and not to a "#top" named element. The testing proved positive. Consequently another big change in my design process.

Your post has forced me to ask if UP and DOWN images within a website and whether they are still necessary. More testing to do. Ah, the joys of website development!

(POSTSCRIPT: As said in my previous posts: Your site is pure inspiration. There are many components I learn and apply!)

Mislav said on October 15, 2006

Ed: "back to top" is nothing like "skip to navigation". While the former is (like Jonathan feels) unnecessary, the latter is very helpful for non-sighted users. A sighted user can quickly (in a part of the second) notice where content or a sidebar or even a footer begins, but those with screenreaders need to have the whole page read out until they figure out where's what. That can take minutes. Good browsers have "back to top" built in (typically <kbd>Home</kbd> or <kbd>CTRL-Home</kbd>).

Dave Shea also writes about social bookmarking icons, and the discussion that follows mentions "send email to friend", CSS/HTML validation and other useless links.

Johan said on October 15, 2006
Thomas Messier said on October 15, 2006

I have mixed feelings about this. If in the end the objective is to improve the experience for the majority, it may be good to have those features. Not everybody knows how to do Ctrl+P to print, some people don't even know where to go at all. A print button makes it more visible, and it also saves you going to the file menu, opening it, and finding the print in there. As for the back to top links, I'm divided, but I think as others pointed out that many people find them very useful. As power users, we sometimes lose track of how many people out there really don't know the first thing about anything tech and you need to babysit them through everything. So this is probably a relative thing, you need t consider who your audience is and make a decision.

j. brotherlove said on October 15, 2006

In the end, the decision to use "back to top" and "print this page" links depends on the audience. And let's face it, the "audience" isn't typically very savvy about browser shortcuts.

However, I do have a pet peeve about buttons labeled "back". Um, back to what? Search engines regularly bring users deep into a website so "back"often means nothing.

Ed said on October 15, 2006

Mislav says: "back to top" is nothing like "skip to navigation". While the former is (like Jonathan feels) unnecessary, the latter is very helpful for non-sighted users.

It's not about being blind. What about small screens. Skip to content/nav etc is a means of whizzing through document and not having to scroll. Back to top is exactly the same. It's a means of on-page navigation where assistance adds usability. This is not about accessibility.

As for screen readers, I think you're misinformed. Headers and listing links are the primary source of navigation with screen readers and users of such tools most certainly do not read the entire page.

I'll say again, most people do not know the shortcuts of applications. Navigating a document is usually done with a primary device. I, for one, only use the mouse. I use the keyboard when characters are called for. As for calling for the application menu options to navigate, rarely do people go beyond back and forward.

if I need to go to the top of a long page, I roll the mouse wheel. I'm perfectly aware of the Home button on my keyboard but I don't use it. Back to top which takes me to a list of actions such as search, nav, headers etc is a usable feature in certain documents and something I use if it's there.

Johan said on October 15, 2006

print buttons are ok if you want to provide a web *print-friendly* version of a page. Eg cooking recipes though often a pdf version is a better idea.

Back to top I really never saw as a usability feature. It would be better if we could assign a key to do the same thing? It is scrolling after all.

Jody Daub said on October 15, 2006

Certainly there are many users that are not aware the Home button on their keyboard will take them to the top of the page. For those that do know, perhaps they prefer mouse navigation over keyboard navigation. I'm not sure if we should get rid of it just yet. For those really long documents with a TOC at the top, I'd even say it should be mandatory.

Jonathan E said on October 15, 2006

I think the 'back to top' links can still be useful, particularly when it comes to smaller screens like cell phones and other hand-held devices. Browsing is difficult on most phones, and until mobile browsers get up to speed, anything to make browsing easier is still useful in my opinion.

With that said, I'm not advocating a return of the 'Back to Top' link all over everyone's websites because (like the print buttons) that functionality already exists within the browser.

micha said on October 15, 2006

please bare in mind that blind people do need them to navigate smoothly through your documents (and most cellphones andd pdas too btw.). i know that screenreaders actually have other features that make these links needless, but most blind people don't know that they have these features, and even *if* they know, they're mostly too complex for them to use. so in the end: *we* need them still, but you can make them /invisible/, if you like :-)

Dave Simon said on October 15, 2006

"Top of page" links are an anachronism. Just as "printable versions" should be (if stylesheets are written correctly).

Another frustration I run into frequently are people who want me to use iframes or frames because they "don't want the user to have to scroll." Only result: non-standard scrollbars within the window.

Yet another function that is already there that people try to replicate because they don't "get" the web. (Don't most keyboards have a "home" key to get you back to the top of the page?)

Anthony said on October 16, 2006

Recently I've made good use of my own 'back to top' buttons - prior to relaunching a discussions service for the University I have gone through each discussion board checking dates of last update, general content themes, and contacting the moderator to ask about usage and intentions for their boards. Navigating pages of my own making has been made so much easier with this feature - critically because it's never more than a few screen inches away from the rest of the links I've been using.
A bit of slick SQL would have pulled all the info I need out far quicker, but denied me the refresher course in my own interface - and finding those buttons 'essential'.
Duplication yes, but helpful and courteous.

JW said on October 16, 2006

I definitely think this is a function which should be implemented by the browser, like the Print and Back/Forward buttons. However, except for the Home key, there is currently no such button in the browser, nor any menu item refering to it. So, no one could get to know the shortcut without accidentally finding it out.
Hence, I propose to add a small horizontal line above the scrollbar, which would scroll to the top of the page, and one beneath the lower triangle. This is something which could be generally available everywhere in the operating system, so, for example, you could use these handy little things too in your text editor.

Otherwise, I think it could form an entry in the "Go" menu of Firefox, underneath the Back, Forward and Home entries.

P.S: The title tag of this page currently contains "Top of Page - -". You may want to remove the double

Andrew Herron said on October 17, 2006

Behold! I give you...

the "Home" key!

Matti Putkonen said on October 18, 2006

Waste of space on shorter pages.

On longer pages, like 2 screens or so, maybe. An script to detect the height of the screen could be used to generate the link at the end of the page if the height reaches some treshold.

Ed said on October 19, 2006

Andrew Herron says: Behold! I give you...

the "Home" key!

I think we discussed the fact the 'Home' key is mostly overlooked, sometimes unheard of, not to mention often requireing the use of a function or Alt key on some keyboards.

Home keys don't work!

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.