When, if ever, should you use a "back to top" link?

Question

I've seen many website designs with frequent inclusions of 'back to top' links and am just wondering when, if ever, they can really be justified? What use cases demand a 'back top top' link, and what are their effects on usability?

Answer 1

I think they can be useful when there is a table of contents at the top of the page, and the content is not sequential - like a FAQ.

Answer 2

I think it's useful when on first thing on the page is a table of contents, each link of which takes the user to some bottom part of this rather long page. Common example is a FAQ page with all Qs on the same page.

Answer 3

They're useful on long pages as long as they're not too frequent, though over a certain size it'd probably be better to split the page up into smaller section pages. See the single-page HTML5 spec as an example why this is needed (it's about 1MB of raw HTML).

I personally like the way Xfce's site does it - one arrow icon in the bottom right corner that stays on screen, out of the way.

Answer 4

As a user, I never use back to top links because that's what the home key does, but I suppose there is a use for them as people sometimes tend to reach for the scroll bar instead.

Answer 5

Limit Back to top links for pages that are longer than say two windows at 1024x768 or a list of contents, faq, etc. The key though is keep them out of the way but visible enough so that the user can see and use them. Smashing Magazine has a really good article regarding this feature/topic: http://www.smashingmagazine.com/2008/11/27/short-story-about-top-links/

Answer 6

They're more useful for disabled readers. Think about a blind user with a screen-reader, reading a large page (such as a FAQ). They want to jump between sections, but they have no visual way to skip over content, so the links are necessary. This structure is pretty common:

• Top of page - one link jumps to first "content" section (hidden from most browsers via CSS)
• Table of contents (just a big list of links)
• For each section:
  • content
  • "back to top" content

Answer 7

I'd say in all, they are useful. But dependent on the website, it would depend on how they've been used.

On a website like this, having the "Back To Top" button on each post wouldn't be a wise use of screen real estate, but rather only at the bottom of the site (possibly just above the reply box and at the very bottom).

If the post lengths were a bit longer (4x the length) then I'd consider using them in the reply headers so users wouldn't have to search for them.

Answer 8

Many people (myself included) would never click a "back to top" link because of their sequential browsing style. This type of user might be using a search engine to research a topic and is quickly going from site to site in their search results. Their browser's Back button is key to getting them back to the list of sites, and clicking a "back to top" link pushes them farther away from the list. This user realizes very quickly not to use this feature, even on long pages.

As a developer I never put in the "back to top" links, even on FAQ pages. I divide my long pages into several shorter ones to avoid this altogether.

Answer 9

FAQ, Large Lists, References, Chapters

Answer 10

Take a look at Interaction Design Pattern Library for a more formal treatment of "to-the-top" UI element:

http://www.welie.com/patterns/showPattern.php?patternID=top

Answer 11

You should always provide breadcrumbs in the interface. These can act as back to top. For instance.

Home -> Private -> Login -> Accounts

These breadcrumbs should be easy accesible to users.