The popularity of responsive web design has led to a proliferation of single-column, long-page designs both on mobile and desktop.  A consequence of these designs has been the Back to Top button, which is a shortcut that allows users to quickly navigate to the top of the page.

When users get at the bottom of a really long page, they often will need to get back to the top to:

  • See the navigation menu and choose a new destination
  • Access filtering and sorting features
  • Enter or edit a query in the search box

Operating systems and browsers already offer a variety of methods to do so: pressing the Home key on a keyboard, tapping the status bar in Safari on iOS, using shortcut commands, and so on. 

However, while technical audiences (like the readers of this article) might know these methods, most users don’t. These techniques are too hidden and inadequate for general Web users, who usually simply scroll up using their finger or the mouse.

When the page is really long (for example, because of infinite scrolling), it becomes too tedious to scroll back up through screens and screens of content. Hence the role of the Back to Top button.

9 Guidelines for Back to Top Buttons

Here are the key guidelines to help you decide when to use a Back to Top button and how to design it effectively.

  1. Use a Back to Top button for pages that are longer than 4 screens. For relatively short page lengths, Back to Top links are overkill — people can simply scroll back without excessive effort. No need to clutter the interface if you can simply use the scrollbar or your finger to quickly navigate to the top.
  2. Place a persistent Back to Top button in the lower right side of the page. This is where people expect to see it. This position is out of the way, but noticeable. When the button is placed in a different place on the screen, it is often ignored.
  3. Label the button Back to Top. This phrase is most descriptive. An icon only (.e.g., an arrow pointing up) can be ambiguous and, depending on the graphical realization, may not convey the right meaning.
MedlinePlus.gov: The meaning of the arrow icon alone is too obscure. A text label would help overcome the ambiguity in this context.

 

Overstock.com: The text label, Back to Top, presented alongside the arrow icon helps explain the button.

 

  1. Have one sticky Back to Top link per page instead of including multiple links in every section of the page. (This latter pattern used to be popular on pages with  anchor links.) In usability studies, we observe people ignoring these repetitive links because they are so predictable.
USA.gov: The repetitive Back to Top links increase visual clutter, causing them to be overlooked.

 

  1. Keep the button small so it doesn’t cover important page elements. But, if you are on a touch screen, make it big enough so people can tap it.
  2. Make the button stand out visually on the page rather than blend in. When Back to Top blends too much with the background content, users are less likely to notice and use it.
  3. Consider delaying the appearance of a Back to Top option until after users scroll a few pages AND indicate that they want to scroll up (e.g., move the scroll bar up, flick up on the page).  Thus, the button appears only when it is most likely needed, without covering up important parts of the screen the rest of the time.
Overstock.com: The Back to Top link only appears when the page is scrolled up. (And it’s in the lower right, as we also recommend.)

 

  1. Make the button stationary. Once it appears, don’t allow it to move. Moving elements cause major distractions, since the eye is automatically attracted to any movement on the screen.
  2. Let users control scrolling. Never allow the page to scroll automatically, such as when new content becomes available at the top of the page. Better to provide a notification and allow users to make the decision on whether or not to scroll to see any new content.

Alternatives to Back to Top

There are alternative methods for getting people where they need to go. Going back to the top is a means to an end. If you can anticipate what users want and offer it to them, even better. Below are a few ideas:

Navigation at the bottom of the page could satisfy those who want to go back to the top to navigate to or search for something else.  This approach works best when users tend to scroll to the very bottom of long pages on your site.

Etsy.com: Rather than using Back to Top, this website offers links in and near the footer to support the user journey.

 

Sticky menus are sometimes a more elegant solution than Back to Top links. If the main purpose of scrolling is to navigate to different topics or sections of the website, having the right menu options available when people need them voids the need to go back up.

Similarly, if the main purpose of scrolling up the page is to access features commonly found at the top of the page (e.g., filter, sort, search, next page), having these features appear when people scroll up offers just-in-time assistance.

Nordstrom.com: This website keeps the refine features sticky on the side of the page, preventing the need for Back to Top for most shopping tasks.

 

The Home button on social sites often brings people to the top of their homepage, which happens to be a page with a long feed and in most need of a quick method to go back to top. Most people on social sites are accustomed to clicking the Home button to scroll to the top of their feed.

While the Home button might work on social sites, don’t count on it for other types of websites. On general websites, people expect the Home link to take them to the homepage, not the top of the same webpage.

Twitter.com: The Home button doubles as Back to Top.

Conclusion

Many good solutions exist to help people get back to the top of webpages. Before you decide to implement Back to Top links, consider your use case and determine which approach works best for your audience.