Replicating Browser Behavior: The Top Link

Posted March 21st, 2007 by Mike Cherim

With interest I watched an exchange on the Web Standards Group discussion list as to whether developers should bother replicating browser behavior such as keyboard shortcuts. I didn’t weigh in with my thoughts at the time. I was too busy to join the fray, plus I wanted to first consider all the possibilities and read everyone else’s comments. The result was I didn’t change my position. Since it’s sort of after the fact on the list I figured I’d discuss it here. My quick conclusion is yes and no; it depends on the behavior being replicated, the ease of making the provision, its perceived usefulness, and really the content itself.

The Behavior: A Keyboard Shortcut

There are several keyboard shortcuts that developers often replicate. The function of hitting hitting the Home key to get to the top of the page is one such behavior. This browser behavior or function is often seen replicated as a “top” link. This is the link that developers often place on their footer to allow the user a fast means of returning to the top of the page. It’s fairly unobtrusive consisting of a link with three letters. See my “top” link as an example.

Making the Provision

The top link is made by inserting a name="top" attribute in an anchor, or placing an id="top" in any element, at the top of the page (I prefer the latter). And somewhere at the bottom of the page pointing to it with a link like this: <a href="#top">Top</a>. It’s not a lot of mark-up and is fast and easy to implement. It is typically a site wide solution — in other words it works on any page that has one of the attributes shown. This is convenient, especially to those who use global files. It should be no more than 32 bytes in size, top and bottom, unless an unnecessary title attribute is added to the link portion.

One of the developers on the list, I forget who but it’s not really important, felt that adding such accommodation was akin to “polluting” one’s mark-up. A purist’s approach. I felt at the time — and still do — that this was perhaps worded too strongly. In a nutshell, I see no problem with replicating this type of browser behavior on a web page. In fact, after weighing the facts, I think it’s beneficial.

Perceived Usefulness

I must first consider who, how, and why someone will be using this link. The respective answers are anyone, doing it with a keyboard or input device, and naturally, to get to the top of the page quickly. This is getting easy. If the link is there, it can be used — user’s choice. Now what if it’s not there? How does that change the situation? How is the user affected?

Short of re-loading the page, to anyone using a keyboard it means they have to use their Home key. Their options have been limited. Assuming they know they can hit their Home key — which is likely if they’re restricted to keyboard use — they have built in functionality they’re used to and will probably not be affected greatly. They also have the option of using shift+tab to go back, using the arrow key, , to scroll up, or possibly using their Back key if they got to their current page location via a jump link. Some users can also use headings to navigate.

Pointer users don’t get off so easily. Consider this: The Home key is on the right side of the keyboard and if a person is using a mouse with his or her right hand, they have to remove their hand from the device, locate the Home key, and press it. This, of course, assumes they know they can do this. They can also use most of the other means mentioned above. Or, if they don’t choose to involve keyboarding they will scroll up the page with their browser’s scroll bar. But how easy is this? Let’s consider the content.

Content’s Contribution

The type of content plays a role. If there are a lot of links on the page, offering a top link can be helpful. Just like jump links and list bypass links can be. No different. More importantly, though, is the quantity of content and how it affects the length of the page. A really long page such as a blog entry with lots of comments makes any upward movement, with exception to using the Home key, cumbersome. Back-tabbing can be murder, there may be lots of links and headings, scrolling up with the arrow key, , can be slow, and trying to grab that little nib of a scroll bar with your pointer can be a challenge. I don’t like that. Give me a top link, please.

I mention a little nib of a scroll bar because it gets smaller as the page gets longer. I have a small amount of difficulty with this. But the limited physical size of this “nib” isn’t offset with my suggestion of using a “top” link. It, too, is a small pointer target (albeit better located in my opinion). The three-letter top link is a minimalist approach providing added functionality in a discreet way. It doesn’t have to be done this way. I know of a couple of sites that use decently sized images that serve as good visual examples. One is better marked than the other, both both are easier to click on. First look at the Web Standards Project (WaSP) site. Click the unintutively-marked wasp near the bottom of the page. Then check out the “Mod” arrow on Andy Clarke’s And All That Malarkey site. If these image links were embedded and used the alt attribute this would do just fine. Unfortunately they don’t. Both use background images and neither is accessible as text if images are off. The latter actually contains no text at all. (If you’re going to offer this functionality with an image, please, make it an embedded image with alt text or a background image with accessible image replacement text.)


I use a mouse primarily, though I do use my keyboard a lot. And I happen to be one of those lucky geekish fellas who knows many of those wonderful keyboard shortcuts — but not all I’m sure. Yet, I will often use a top link if it is a long page and it’s available to me. I appreciate it, in fact. I don’t expect the developer to go to great pains in accommodating me, nor do I expect any fancy scripting, and I’m certainly not asking to reload the page (top links and other in-page bookmarks don’t do that). Just three simple letters is all I need.

Anyway, that’s my take on the matter. I used a heading for this post that might open this up to become a series of sorts. I mean there is text enlargement, print functions, heck, even jump links to consider. All of these can be considered a replication of browser behavior if added to a page by the poor beaten up developer. I will say now that I don’t think all of these examples should be replicated, but all should be really thought out before bringing down the axe on them too swiftly. Pure, clean mark-up is a good thing, but when mark-up itself is considered pollution maybe it’s time to take a second look and analyze the consequences. It’s one thing being a purist, but there should always be a reason for it besides being “pure.”

9 Responses to: “Replicating Browser Behavior: The Top Link”

  1. JackP responds:
    Posted: March 21st, 2007 at 11:39 am

    This ties in a little with Patrick Lauke’s recent comments. Basically, there are four areas of responsibility:
    1. The user agent manufacturers
    2. The users, to know how to operate their user agent (including keyboard shortcuts)
    3. The site commissioners, to understand the importance of usability, accessibility, testing etc
    4. The site developers

    …and historically #4 have done the most to cover up for missing functions or missing knowledge in the other areas.

    Is it worth replicating existing functionality? It depends how much work it is, how easy it is for the users to access that functionality, how important it is for the users to access that functionality, and how many people are likely to benefit.

    In the case of “back to top” links, I’m probably with you: they help, and they’re little effort to add, so why not? But equally I’d not get upset with a site that didn’t include them…

  2. Joe Dolson responds:
    Posted: March 21st, 2007 at 11:55 am

    Funny…I just wrote something very similar at the Cre8asite blog. It was interesting following that conversation on the Web Standards Group — I didn’t see a lot which I really agreed with.

    Nice post.

  3. Georg responds:
    Posted: March 22nd, 2007 at 12:56 am

    I don’t think we should take up too much slack - just a little here and there to make sure things work, or else there won’t be any slack to take up for those at the other ends so they won’t bother.

    I tend more and more to look at in-page replication of browser behavior as unnecessary noise. Seeing such replication often makes me think that the designer don’t know about these browser functionalities, or that s/he don’t think anyone else does or should be bothered to learn about even the most basic functionalities.

    However, if it makes sense and (looks like it) improves usability to have something like extra ‘top’ links or extra ‘in-page’ links because of the way the content is organized in a specific page-layout, then I’ll add them without hesitation. The same with other additions that (more or less) replicate browser functionalities - they make sense and improve usability in some cases.

  4. Tommy Olsson responds:
    Posted: March 22nd, 2007 at 2:31 am

    I’m a keyboard user. I don’t touch the mouse if I can avoid it. A ‘top’ link is pointless to me, because hitting the Home key is much faster, works on all sites and doesn’t make me dependent on the author’s good will towards men.

    Some of my colleagues at the office have said that they would like to have top links on our intranet. They mainly use the mouse, mostly (I guess) because they use inferior browsers that do not have as user-friendly controls as Opera. I tend to think, ‘why don’t you just hit the Home key?’ but I know I have to realise that others have different preferences. BTW, Mike, your argument about letting go of the mouse to press the Home key doesn’t hold water: most users can use two hands, and could quite easily use their left hand to hit Home if they use their right hand for the mouse. :)

    Anyway. Let’s look at why a user would like to return to the top of the page. My guess is that it’s not because they loved the article so much they want to read it again, nor that they want to admire the pretty masthead image. The reason a user wants to go back to the top is, I assume, that he or she wants to access the navigation menu, which often resides across the top or in a vertical menu near the beginning of the page.

    Thus, instead of a link to the top of the page, wouldn’t it be even better to provide a link to the first item in the navigation menu? Especially for those poor souls who use browsers that do not support spatial navigation.

    And there’s one more thing I think needs to be addressed: if we choose to duplicate this browser function, where do we draw the line? What other browser functions ’should’ we emulate? Print this page? Increase/decrease text size? Page zoom? Add as bookmark? Set as home page? Scroll up/down?

    A top link may enhance usability for some users, but I doubt that there are many users who would be unable to go back to the top if there were no top link. Compare to the change text size function: there are many users who do not know this feature exists, even though they really need it. Why duplicate one but not the other? Food for thought. :)

  5. Tommy Olsson responds:
    Posted: March 23rd, 2007 at 3:12 am

    Thanks for making me think, Tommy. Now my head hurts

    I tend to have that effect on people. :)

  6. Replicating Browser Behavior: Print Function - responds:
    Posted: May 7th, 2007 at 1:27 am

    […] I had mentioned in a previous article, “Replicating Browser Behavior: The Top Link,” that I named it the way I did with the notion that I might expand it into a series of articles. Following through with that, I am offering a look at another browser function often replicated by web developers: The print function. For the record it isn’t really a browser function, but rather a function of the operating system accessed through the browser. I’m including it in that category, though, so let’s take a look. […]

  7. Nicole responds:
    Posted: May 8th, 2007 at 10:11 pm

    Well it’s incredible. . .

    I agree with the comments made so far in that if it’s not too much trouble to include things like this, then why not!

    But I’ve just returned to this page having previously used my mouse’s vertical scroll wheel to go up the page to follow some links, and have just used this vertical scroll wheel once again to get back to the top.

    It’s not really a case of old habits dying hard, just that using the mouse’s vertical scroll wheel is obviously the way I get back to the top, despite it usually taking longer.

Sorry. Comments are closed.

Note: This is the end of the usable page. The image(s) below are preloaded for performance only.