Smashing Magazine - we smash you with the information that will make your life easier. really.
A Short Story About “Back To Top” Links
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 captions, block quotes, date stamps, shopping carts, pagination, <hr> lines, tag clouds and favicons.
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.
[By the way, did you know there is a brand new Smashing Wordpress Book? Push WordPress past its limits!]
When “Back to Top” Links are Useful
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.
Where Should the “Top” Link be Placed?
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.
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.
How to Create a “Top” Link?
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.
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” link 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.
“Back to Top” Link vs. “Home” Link
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.
Mistake: “Home” instead of “top”
Home, sweet home…
Back to the home page in Spanish
Another “home” example in the footer.
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.
Same here: the illustration is not clickable.
And here, too.
“Back to Top” Links Showcase
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.
An animated “Back to top” link
A link as part of the navigation. Looks good but may be a little irritating at first glance.
The “top” icon here follows the scroll bar vertically.
We don’t know why the remote control is placed there: it is not clickable, but it could be.
Sources and Resources
- Usability Advice: “Back to Top” Links
- Replicating Browser Behavior: The Top Link
- Nielsen: Within-Page Links for AJAX, “Return to Top”, Skip Links
(al)
The Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Author of several books. Runs the business.
(No votes yet)
Loading ...- 65 Comments
- 1
- 2
November 27th, 2008 4:17 pmNice article, but I never use that function…
- 3November 27th, 2008 4:31 pm
having a “back at top” link is useful especially for websites that tends to have lenghty entries. Yes the scrollbar is enough or the mouse scroll is useful, but if you are leaning to a responsive website, it should be included to give consideration to the fact that the website will be lengthy.
- 4November 27th, 2008 4:51 pm
Isn’t that method deprecated in favor of id=”top” in the header (or body in the example listed there).
- 5November 27th, 2008 4:54 pm
@sryo (#4): we are not sure about that. Body-elements typically have an ID anyway and it is not really correct to just give them the ID “top”. And if you have a header-container, then it already has the ID “header”. And it is definitely not a good idea to just add some empty div-container with the ID “top”. Therefore, in our opinion, it is a better idea to use a simple link instead.
- 6November 27th, 2008 5:11 pm
I stand corrected, although I still believe adding an empty tags like (or “anorexic anchors” according to Tantek) should be avoided.
- 7November 27th, 2008 5:16 pm
Ten minutes ago I was just deciding on whether to use a “back to top” link since I look for it on other websites quite frequently. I’m glad I happened to read this post. Crazy timing. I actually prefer to scroll down instead of clicking “next page” 5 times for a long article so I’ll probably be implementing this in my new site design. Now I have a few ideas for inspiration!
- 8November 27th, 2008 5:25 pm
Regarding the code – I usually use the header container (or body, or anything else that is already present in the layout), and use the code: <a href=”#header”> Back to Top </a>
There is no need to create additional element if you can use the one you already already have. - 9November 27th, 2008 5:53 pm
I was shocked to see an article on using using fragment identifiers (which is what these are) because so few people use them anymore. However my shock turned to disappointment when you implied they should go to empty "anchor" tags with "name" attributes.
This document claims to be XHTML™ 1.0 Transitional (not that it’s even close to valid) so you should be using "id" on elements with semantic meaning. Not attributes not "name" attributes on "anchor" elements, which are deprecated in XHTML™ 1.0 and higher. Even the HTML™ 4 specification indicates the use of the "id" attribute, but allows the "name" attribute to continue being used for compatibility. However even in HTML™ 4 the value of "name" attributes must follow the same rules as the "id" attribute with which they share a namespace. I would also add that this document has multiple elements with identical "name" attributes on elements for which they are not allowed.
Please observe this reliable link to a "div" element with an "id" attribute in this document, even though there is no "anchor" tag with a "name" attribute of "comments".
<a title="View comments" href="http://www.smashingmagazine.com/2008/11/27/short-story-about-top-links/#comments">This link will take you to the comments</a>For official and accurate information on this topic please see "XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition)" Section C "HTML Compatibility Guidelines" Subsection 8 "Fragment Identifiers" on the W3C® website at http://www.w3.org/TR/xhtml1/guidelines.html#C_8 Which I have not linked to because the preview of this comment indicated it was going to alter the markup I had entered and create a link which contained an erroneous right double quotation mark inside of the "anchor" tag’s "href" attribute.
- 10November 27th, 2008 6:29 pm
Does anyone else see the irony in this post. SM doesnt have a back to top link ;) Nice post all the same.
- 11
- 12November 27th, 2008 6:49 pm
Nice post… Thanks Smashing!
- 13November 27th, 2008 7:12 pm
My take on this is to have a semi-transparent link that remains fixed on bottom *of the viewport* (not the page) and scrolls with the user. For extremely long pages — and particularly pages that make you jump a lot, like FAQs — this ends up being extremely useful, since you always have a “Back to top” link, and it’s only one, and you always know where to find it.
Using some javascript magic, we can even remove the href=”#top” from the link, removing the navigational obstacle cited as a deficiency of these sort of links, and just
scrollTo(0, 0)when someone clicks the “link”.An ex coworker of mine has detailed the thought process we did when designing Operator11 (regrettably the site has been taken down, but in the aforementioned blog you can get a zip with example source code.)
- 14November 27th, 2008 7:13 pm
Er let me thank the “smart” script that replaced the content of my link with “Link”… =)
That should read: “An ex coworker of mine has detailed the steps we followed for the back to top link when designing Operator11″…
- 15November 27th, 2008 7:20 pm
Sweet! When I read the title I was wondering “Are they going to include the CSS Gallery List?” Cheers for the inclusion :)
- 16November 27th, 2008 7:25 pm
Although the anchor method is the most widely used, I prefer utilizing javascript. Not only do you not have to worry about extra tags making your code messy, but navigation isn’t disrupted and it works with both IE and FF. The code I throw into a “href” tag is..
javascript:scrollTo(0,0)Check it out.
- 17November 27th, 2008 7:36 pm
mydelivery.com.au has a nice java animation that takes the user back to the top.
- 18November 27th, 2008 7:52 pm
Smashing Magazine’s long pages don’t have a “top” link here at the bottom…
- 19November 27th, 2008 9:41 pm
Yes! Smashing Magazine needs a top link…
- 20November 27th, 2008 11:41 pm
I wonder: are there any statistics on how many people are using this top-link?
I can’t remember I have clicked on such a top-link any time recently. I never use it.
The only time I could imagine this is, when you are sitting on your couch and only have the mouse by hand without any keyboard. - 21November 27th, 2008 11:44 pm
Someone with the resourcesh should make some studies on the ‘top’ link. Users need it, or don’t. For now we just guessing is in necessary. I, on my blog, got even two of them in two levels of the website. Never thought about checking if anyone uses it, but it should be easy, right? Let me just find some stats that shows the clicking-areas.
- 22November 27th, 2008 11:45 pm
Nice article!
Just a little note: inserting an anchor directly into body tag isn’t permitted by XHTML 1.0 Strict :D - 23November 28th, 2008 12:08 am
Wonderful, grateful, but we don’t have a link in our Back to the home page in Spanish, Why not? There goes our link Blog Me Tender
Thanks a lot
- 24November 28th, 2008 12:42 am
Why hasn’t this feature been included into any web browsers? Since this is basicly a browser element it would be logical to include it in the browser’s scroll bar – something for the guys at Mozilla to think about.
Until then I guess we’ll have to make do with different icons and placement based on the site design.
- 25November 28th, 2008 1:36 am
Arnar: Now thats a great idea. A little button (just like the one in the Microsoft Office) in the bottom of the scrollbar. It would be usefull – instead of clicking Home on the keyboard you just click the button. You should definetly send that idea to Mozilla and Opera. ;)
- 26
- 27November 28th, 2008 1:47 am
Why isnt it here? :P
- 28November 28th, 2008 2:44 am
& on the flip side why you shouldn’t use “back to top”…
- 29November 28th, 2008 4:27 am
I agree with Nielsen. It can & must be avoided.
Anyway, a nice article as usual. A good one, indeed. - 30November 28th, 2008 5:12 am
I too never use them.
- 31
- 32November 28th, 2008 5:15 am
“Some usability experts and even the Yoda of usability, Jakob Nielsen, reject the “top” link unanimously.”
Interesting article, highlighting how harmful ‘Back to Top’ links can be – I enjoyed the inclusion of ‘Start of Page’ links, particularly the one 6 lines from the top of the page. However, I found I was confused by what they meant – start of which page? The page of my book? The page of my newspaper? The Google home page?
Having never come across ‘Start of Page’ links before (I’m more familiar with ‘Back to Top’ links), I am confounded as to their purpose…. blah blah blah…
Yes, enough with the usability crap already! The author of the ““Back to Top” links considered harmful” article assumes that web users, especially those with assistive technologies, are idiots. He also lists the print issue with these links as a reason not to use them “you can use CSS to prevent this, but most authors don’t do that.” – but authors should. This is not a reason to ignore the links as a useful tool.
““Back to Top” links are not consistent across sites, in appearance or details of functionality.”. The same could be said of all navigational elements – how many websites construct their navigation in the same way, or styles their links to look the same as everyone else’s?
“Back to Top” links also disturb the use of speech-based user agents. Would you like to listen to a page, using a speech synthesizer, if there were an abrupt note like “link: back to top” e.g. after each paragraph? Such user agents often have a link reading mode where only links are spoken, in sequential order.”. So why have you used them (or a version of them) in your article, you cretin?
“If you use “Back to Top” links, the following is a reasonably harmless method…” – So, after all that, you give an example of a ‘reasonably harmless’ method? Your article is therefore a complete waste of a readers time, and I’m offended by the time I wasted reading it.
I get really pissed at ‘Usability Experts’ spouting self-righteous crap that has no place in the real world. Get over yourselves, you pompous imbeciles.
Smashing Magazine – great article.
- 33November 28th, 2008 5:21 am
Never use them
- 34November 28th, 2008 9:04 am
I’ve been working pretty assiduously on this problem and suggest that we all band together to get browser developers to map the ‘Home’ key on the keyboard to an action that calls a javascript function to take users to the ‘Top’ of the page. Hopefully our combined knowledge of CSS and jQuery will add gravitas to our request.
Oh wait. The ‘home’ key already does this.
- 35November 28th, 2008 9:34 am
very nice!!
- 36November 28th, 2008 2:17 pm
funny, you guys should have a “back to top” on this page :) keep up the good work
- 37November 28th, 2008 2:28 pm
Most to the top code is not clean.
The most beautiful ‘to the top’ code, brings you to the top without puting the # behind the url. - 38November 28th, 2008 2:49 pm
Because of the new netbooks’ success with their screen resolution of 1024×600 I think the “Back to top” links will get more popular again, soon.
- 39November 28th, 2008 6:53 pm
I think the great question here is that no doubt it may pose to be quite useful, however usability wise, do people really use it? Maybe that should be more the topic of discussion (and for stats too!).
For instance in a Smashing Post, I almost would never need to click on it because I would already have read everything I wanted to at the top, then read the comments..
However, in the case of FAQs, it makes a ton of sense to have a “back to top”. :)
Regardless, thanks for the resource and putting it together. :p
- 40November 28th, 2008 7:23 pm
A BIG link “go to top” would be great on smashing
“Leave a Reply” on the left column and in front, “or go back to top _Δ on the right column for instance. Sometimes to scroll up i use my mouse wheel and it takes forever.
I dislike to point and click, and the scrolbars are too small (on a mac 24″, you rarely maximize your windows, and since i have 2 screens, i can’t just move right and click at random : my pointer wouldn’t be on the scrollbar).
So since i dislike to point (if so i’d use the scrolbar), a big “go to top” is what i need. And i think… what most users need : no “go to top” or a big one that is much quicker to click than the scrollbar. - 41November 29th, 2008 3:36 am
I always have a “back to the top” link for two reasons: 1) the long content 2) to make it easier for my visitors (especially for those who have some kind of disability or restricted mobility in their hands). And I uses the div-method.
In my opinion, to scroll pages with long content is not a big hit.
- 42November 29th, 2008 4:10 am
I very much love summer :)
Someone very much loves winter :(
I Wish to know whom more :)
For what you love winter?
For what you love summer? Let’s argue :) - 43November 29th, 2008 4:14 am
Although the anchor method is the most widely used, I prefer utilizing javascript. Not only do you not have to worry about extra tags making your code messy, but navigation isn’t disrupted and it works with both IE and FF.
OK Ryan, what happens for people that DISABLE Javascript? Nothing? Sigh…
And oh thanks for the update in “How to Create a Top Link?”, the third one is the only good way to do it.
Great showcase anyway =) - 44November 29th, 2008 5:09 pm
end and home are standard keys. If your users do not want to untilise them why should you have to provide another method of doing something provided by almost every keyboard on the planet.
Having said that if you somehow manage to design a page that does not work with this then by all means.. but the majority do not need it.
If your design needs a back to top pretty picture in order to stand out I would think that working on the rest of the design is a better place to begin rather than a back to top thing.
- 45November 29th, 2008 5:55 pm
@STPo,
Wrong.
The most user-friendly solution is going to be to take the best of both worlds and put them together. Have a standard anchor (and to be semantically correct you had best give it a real destination) and on page load use JavaScript (when available) to replace the link with a call to a JavaScript function that scrolls to the top of the page.
If your users are conservative or paranoid enough to turn JavaScript off completely they’ll be sent to the top still, only they’ll have less graceful history. None of your other (smarter) users are worse off because of it.
There is never a situation in web development where having a gracefully degrading solution is not the best for the user experience.
- 46November 30th, 2008 10:12 am
@Corey Ward,
Wrong? Excuse me?
OK, if you like flashy JavaScript tuning, go on. ScrollTo functions make me sick but I can understand some people love them… =)
Just do not forget the basic HTML anchor link and to use unobtrusive JavaScript (unlike Ryan’s solution).Oh and:
If your users are conservative or paranoid enough to turn JavaScript off
Some users don’t have any choice. A lot a big companies turn javascript off on their employees’ computers regarding to security problems.
- 47November 30th, 2008 12:46 pm
See, these articles are the reason I read Smashing. I love a bit of detail. Thank you :)
- 48November 30th, 2008 2:42 pm
Great article – it’s a shame there is no ‘back to top’ link on Smashing.
- 49November 30th, 2008 4:38 pm
Nice article but I think you should disinfect your keyboard after mentioning the words “Jakob Nielsen” within a design website. He is to usability what the flaming gif is to web design.
- 50December 2nd, 2008 7:07 am
anyone know a good place to get images of small arrows??
- 51December 2nd, 2008 11:06 pm
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?
- 52December 3rd, 2008 1:48 am
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.
- 53
- 54December 9th, 2008 1:53 am
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) - 55
- 56December 23rd, 2008 10:14 pm
Cool! Thanks for including me – JAN
- 57January 6th, 2009 8:29 am
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.
- 58April 17th, 2009 1:17 am
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.
- 59April 17th, 2009 1:18 am
Hmmm it seems the code tags here do not do what I expect. That was a code example, not a link. : (
- 60April 17th, 2009 11:59 am
you guys really need a back to top link
- 00
There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.
Leave a Comment
Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!
Interact
Popular
- 100 Wordpress Themes
- Photoshop Tutorials
- Fantastic Wallpapers
- 40+ Excellent Freefonts
- Dual-Screen Wallpapers
- Wordpress Themes for 2009
- Illustrator Tutorials
- Incredible Free Icon Sets
- High-Quality Free Fonts
- 30 Scripts For Galleries
- Photoshop Text Effects
- Useful Icon Sets
- Web Design Trends
- iPhone Wallpapers
- Before Launching a Website
- CSS Layouts And Templates
- Photoshop Actions
- Stunning Pictures and Photos
- Fantastic HDR Pictures
- Logo Design Tutorials
- Free Design Templates
- 10 Mistakes In Logo Design
- Photoshop Custom Shapes
- 40 Creative Design Layouts
- 8 Layout Solutions
- 53 CSS Techniques
- Photography Techniques
- Black & White Photography
- Styling Design Elements
- CSS-Based Forms
- 50 jQuery Techniques
- 50 Portfolio Websites
- 50 CSS Techniques
- Creative Logo Designs
- Desktop Wallpapers
- 25 Open Source Mac Apps
- 50 Free Icon Sets
- @jchristopher it's our pleasure, Jonathan.
- HTML5 vs. Flash - http://remysharp.com/2010/02/08/html5-vs-flash/
- Learn Something Every Day: a nice little blog updated every day - http://bit.ly/rmcES
- We’re Ready for CSS3, but are we Ready for CSS3? - http://bit.ly/cKN7Bz
- lovely-css: a grid-based CSS framework - http://bit.ly/ayA0wb
- How The CSS Selector nth-child Works - http://bit.ly/cgPMqe
- 33 New High Quality Adobe Illustrator Tutorials - http://bit.ly/bTgFbu
I love it. Another genius article.
You guys are doing a great job.