Summary: 9 UX guidelines for Back to Top links which help users navigate to the top of long pages. Depending on users’ needs, other techniques may be more appropriate on some sites.

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.

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. 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. 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.

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.

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. 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. 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.

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. 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.

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.

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.

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.