Skip to main content

Inpage Navigation

A 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

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.

Do's​

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