A Short Story About “Back To Top” Links

Advertisement

Often it is the close attention to small details that makes a design outstanding. During the development of a website, designers tend to quickly forget about small details and focus on major design elements, such as navigation, typography and layout. If done properly, the result is usually a solid, impressive and highly professional design that communicates information. However, it is not memorable. The reason is that such designs often do not have a memorable voice: they may look visually appealing, but they don’t provide a vivid anchor for users to remember a website after leaving it.

In this way, little details are important because they can help the design stand out. Have you ever thought about the design of your shopping cart? What about the design of tags, date stamps, “Previous” and “Next” links? All of these small details are not crucial for website navigation, but they add up to a more user-friendly, more convenient and sometimes also more sophisticated design. And this is why we have focused the attention of our readers on such things as image captions1, block quotes2, date stamps3, shopping carts4, pagination5, <hr> lines6, tag clouds7 and favicons8.

Screenshot - Top Link22910

In this post, we showcase the design of “Back to top” links, a forgotten and rarely used link that helps users jump to the top of a given page. A visitor can achieve this effect by pressing the “Home” button on his or her keyboard; however, not every user is aware of that shortcut, and most probably use the vertical scroll bar in the browser for that purpose. As designers, we can help our users out by adding a stand-alone “top” link to our designs.

Unfortunately, this friendly service — letting users jump to the top of the page — is offered very rarely. Most designers don’t include it, which is why it took us over 5 weeks to collect at least a few dozen nice examples for this post.

In fact, “Back to top” links are not always useful. For example, they may be unnecessary for websites that have rather short pages or articles. In such cases, there is no need for users to jump to the head of the page, because the whole page is completely visible anyway; if a “top” link is included on such pages, clicking on it will produce no effect, which is rather irritating. This is another reason why many designers don’t use it: the variety of currently available screen resolutions makes the “top” link unusable and unnecessary. That’s why using “Back to top” links for rather short pages is not a good idea.

However, websites with long pages can offer visitors a nifty feature that saves time and avoids the need for vertical scrolling with the mouse.

The most obvious and common place for a “Back to top” link is the footer. This is where it belongs and should be placed. We weren’t able to identify a common design scheme for the alignment of the “Back to top” link. Some designers place it on the left side of the footer, others place it in the middle and yet others put it on the right side of the footer. It is also very common to place the “top” link on the left-hand side of the content area, directly under the article.

Screenshot - Top Link11
Meet the friendly “top” link: it is often placed in the footer of the page and almost always appears very modest and almost bashful.

“Back to top” links are also often used in FAQs, help sections and site maps, where they help divide chapters or paragraphs and provide users with a quick way to jump to the beginning of the page, where the main navigation is placed.

To point the link to the top of the page, in most cases it is enough to define an empty anchor and put it right after the <body> tag:

<div id="footer">
<!-- footer goes here -->

<a href="#">top</a>

</div>

However, older browsers and, in particular, legacy browsers have problems interpreting this markup. An alternate solution is to use a real anchor that is explicitly defined and placed right after the <body> tag:

<body>

	<a name="top"></a>
	
	<!-- content goes here -->
	
	<a href="#top">top</a>
	
</body>

Update: another method that avoids unnecessary markup and therefore should be preferred is to use the ID of the wrapper or header for the same purpose. For instance, if you use the div-container with the ID “wrapper”, you may use the following markup:

<body>
	<div id="wrapper">
	
	<!-- content goes here -->
	
	<a href="#wrapper">back to top</a>

	</div>
</body>

Of course, the link itself doesn’t have to be text; it can also be an image, a button or any other element of your choice (using images may have some usability issues — see below).

Wording

Never mind what phrase you actually use: you just need to make sure that visitors understand the function of the link and aren’t irritated by it. For instance, it’s probably not a good idea to use the word “Return” because it is not immediately clear if the user will be taken to the home page, the previous page in the browser’s history or the top of the page.

Screenshot - Top Link12

Use clear and concise terms, such as “Go to top,” “Back to top,” “Return to top” or “Jump to top.” Sometimes a harmless “Up” is used. However, we’re not sure if that’s actually a good idea. Probably not.

Problems and Disadvantages

Some usability experts and even the Yoda of usability, Jakob Nielsen, reject the “top” link13 unanimously. According to them, in-page links should be avoided at all because the scroll bar suffices completely, and additional options can be irritating and unnecessary. However, they agree that “Back to top” links may be useful if pages are extremely long, which should be avoided anyway.

One major problem with “top” links is that they have an impact on the browser’s navigation buttons and as such pollute the browsing history. Because “top” links are anchors just like any other links, clicking on the browser’s “Back” button will take users to the foot of the page they are currently viewing, not to the previous page. On top of that, accessibility experts claim that “Back to top” links may disrupt the use of speech-based user agents, that the “top” concept is vague and that “Back to top” links are not used consistently across websites.

In our search for interesting “Back to top” examples, we stumbled across some solutions in which designers used images to allow users to jump to the top of the page. However, it is worth mentioning that images should make it clear to users that the link leads not to the home page of the website but to the top of the page. “Home links” are not “Back to top” links, and “Back to top” links are not “Home links”. If you decide to use such links in your design, make sure that visitors can understand the difference immediately.

Screenshot - Top Link14

Mistake: “Home” instead of “top”

Screenshot - Top Link15
Home, sweet home…

Screenshot - Top Link
Back to the home page in Spanish

Screenshot - Top Link16
Another “home” example in the footer.

Screenshot - Top Link17
The icon on the right-hand side is not clickable: it could be used to lead to the home page, but not the top of the page.

Screenshot - Top Link18
Same here: the illustration is not clickable.

Screenshot - Top Link19
And here, too.

Here are some more examples of “Back to top” links. It took a while to collect them. Hopefully, they’ll serve as a good source of inspiration for some of our readers.

Screenshot - Top Link20

Screenshot - Top Link21

Screenshot - Top Link229

Screenshot - Top Link23
An animated “Back to top” link

Screenshot - Top Link24

Screenshot - Top Link25

Screenshot - Top Link26

Screenshot - Top Link27

Screenshot - Top Link28

Screenshot - Top Link29
A link as part of the navigation. Looks good but may be a little irritating at first glance.

Screenshot - Top Link30
The “top” icon here follows the scroll bar vertically.

Screenshot - Top Link31

Screenshot - Top Link32

Screenshot - Top Link33

Screenshot - Top Link34

Screenshot - Top Link35
We don’t know why the remote control is placed there: it is not clickable, but it could be.

Screenshot - Top Link36

Screenshot - Top Link37

Screenshot - Top Link38

Screenshot - Top Link39

Screenshot - Top Link40

Screenshot - Top Link41

Screenshot - Top Link42

Screenshot - Top Link43

Sources and Resources

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/2008/11/04/image-caption-design-simply-elegant-or-boldly-graphic/
  2. 2 http://www.smashingmagazine.com/2008/06/12/block-quotes-and-pull-quotes-examples-and-good-practices/
  3. 3 http://www.smashingmagazine.com/2008/02/22/gallery-of-date-stamps-and-calendars/
  4. 4 http://www.smashingmagazine.com/2008/02/07/shopping-carts-gallery-examples-and-good-practices/
  5. 5 http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/
  6. 6 http://www.smashingmagazine.com/2008/08/22/the-hr-contest/
  7. 7 http://www.smashingmagazine.com/2007/11/07/tag-clouds-gallery-examples-and-good-practices/
  8. 8 http://www.smashingmagazine.com/2008/11/20/favicons-episode-8/
  9. 9 http://www.dawghousedesignstudio.com/
  10. 10 http://www.thegregbradyproject.com/
  11. 11 http://www.wannabegirl.org/
  12. 12 http://www.webleeddesign.com/
  13. 13 http://www.cs.tut.fi/~jkorpela/www/totop.html
  14. 14 http://www.taptaptap.com/blog/
  15. 15 http://www.reallywildtravel.com/what-is-a-challenge-event.html
  16. 16 http://www.lucyblackmore.co.uk/
  17. 17 http://www.fuelyourcreativity.com/
  18. 18 http://www.wordpress-designers.com/premium-wordpress-themes/sketchd/
  19. 19 http://wefunction.com/2008/07/unconventional-web-design-inspiration/
  20. 20 http://www.subdued.net/
  21. 21 http://www.chigarden.com/
  22. 22 http://www.dawghousedesignstudio.com/
  23. 23 http://moustacheme.com/
  24. 24 http://taufiq-ridha.co.cc/
  25. 25 http://www.decatur-airport.org
  26. 26 http://www.dcresource.com/
  27. 27 http://www.zufanek.cz/
  28. 28 http://www.thegregbradyproject.com/
  29. 29 http://www.hebatec.de/
  30. 30 http://www.nue-media.com/
  31. 31 http://slydial.com/
  32. 32 http://www.jeffsarmiento.com/
  33. 33 http://www.thecssgallerylist.com/
  34. 34 http://www.incayellow.com/
  35. 35 http://www.loodo.com.br/
  36. 36 http://www.cooper.com/about/process/
  37. 37 http://soobox.com/
  38. 38 http://ilovetypography.com/
  39. 39 http://www.albertlo.com/
  40. 40 http://gapersblock.com/
  41. 41 http://www.designworkplan.com/
  42. 42 http://www.bainbridgestudios.com/
  43. 43 http://www.olliekav.com/
  44. 44 http://freeusabilityadvice.com/archive/24/back-to-top-links-anchor-links
  45. 45 http://green-beast.com/blog/?p=177
  46. 46 http://www.useit.com/alertbox/within_page_links_comments.html

↑ Back to top Tweet itShare on Facebook

Sven is the co-founder and former CEO of Smashing Magazine. He's now writing at his Conterest Blog, where he focuses on blogs, content strategy and publishing — all in German.

Advertisement
  1. 1

    I can’t believe you didn’t include Stuff and Nonsense‘s top-link! Check it out in the bottom right corner. Try hovering that fella, eh?

    0
  2. 52

    Very interesting read and a part of web design I wouldn’t normally focus. I tend to use the wording “Back To Top” and keep it a simple link, I believe the user expects to find this link bottom left of the page.

    0
  3. 103

    I really like the way it is done on http://elliotjaystocks.com/blog/

    0
  4. 154

    Thank you for sharing this great article !
    I have translated this into chinese for more chinese readers.
    and it named

    ———
    please don’t do this! for several reasons. (the smashing team)

    0
  5. 205
  6. 256

    Cool! Thanks for including me – JAN

    0
  7. 307

    Ironic, that an article about “Back to Top” buttons, doesn’t feature a back to top button of its own at the end or the article nor at the end of this webpage. I kinda liked that.

    0
  8. 358

    I use back to top (naar boven) links on long pages and in FAQ’s. Nielsen’s never seen terms and conditions in HTML before (even though he advocates HTML versions of stuff like that instead of just a PDF, which he hates)? You would NEVER break something like that up into multiple little pages. I use the existing-id method for back to top, but for other in-page and skip links I’ve found that while the browser will visually go to the right place, browers like Safari let the next tab be wherever you WERE because the focus didn’t actually move, and so to make a truly focusable destination I hide links: Header Text
    Where there’s also an href– the link can’t be clicked but it doesn’t take you anywhere else in a text browser or screen reader, whereas empty hrefs or nameless hashes do different things cross-browser. Now the focus can truly reach the destination, so the next tab or other keyboard command starts from where you think you are, visually, in all browsers/user agents. (I haven’t tried leaving the href out completely as what used to be done with the “name” attribute– oh and BTW someone said it was deprecated in XHTML1.0 but it’s NOT, unfortunately… XHTML1.1 and 2, yes)

    Always looking to see a better way to do this though. The showcase was interesting. I may spice up one of my ” naar boven” links.

    0
  9. 409

    Hmmm it seems the code tags here do not do what I expect. That was a code example, not a link. : (

    0
  10. 460

    you guys really need a back to top link

    0
  11. 511

    Is there a page length beyond which one should consider including the back to top link?

    0
  12. 562

    David Radovanovic

    February 2, 2013 5:33 pm

    5 years later, do UX experts frown upon think return_to_top_icon or links? I think there’s actually more use of “Back To Top” anchor links than ever before. Especially if it enables a long page to load up on mobile devices, preventing continual page loads thereafter. A perfect example of a page desperately in need of a Return To Top link is http://styletil.es/. It’s a extremely fast loading page design using Twitter Bootstrap.

    0
    • 613

      I just discovered this post and was thinking something similar.

      When browsing on a PC, I rarely use “Back to top” links, because hitting the Home key is much more efficient.

      But on mobile, I find them invaluable. With no “home” key, and scrolling that requires repeated swipes (rather than a simple click and drag), a simple link is quicker and easier.

      So, until something better comes along, I think we’ll see more “back to top” links with the growth of mobile browsing.

      1

↑ Back to top