E5.09.1back to topdesign

Long pages need a fast path back to the top

Aliases: scroll to top · jump to start

What it is

Once a page runs longer than a few screens, returning to the start to change a filter, read the title, or scan again is billed by the distance already travelled. Back to top is a distance-independent shortcut that sends the viewport to the document origin. It exists because the path got long, not as decoration. Short pages do not need it; long pages without it leave only “scan the same stretch in reverse”.

Why it happens

Scrolling is an integral: every screen down is a screen that must be repaid on the way up. Long articles, long results, and lists after infinite append make that integral larger than people will pay, so they switch to clumsy resets — flinging the scrollbar, pressing Enter in the address bar, leaving and coming back — which drop in-page state or overshoot. Back to top collapses the integral into one jump, serving “I want the things that live at the origin”: the filter bar, the title, primary navigation, the first item.

The need appears with depth. Nobody wants it on the first screen; past some depth, origin controls become both important and remote. So it is a conditional entry: too early and it is noise, too late and people have already started using destructive resets. If the animation turns the jump into a slow glide, the shortcut becomes an integral again, only with the system moving the fingers.

Where it stops holding

On a one- or two-screen page the control is interference. On a horizontal canvas, a map, or a timeline, “origin” may not be visual top but a selected object or today; forcing y=0 wrecks the working place. Long text whose reading position must be remembered treats a jump to top as losing the bookmark; offer “return to where I was” as well, or do not auto-jump. Screen-reader users often reach the top with a heading rotor; the visual button is not the only path, but focus should still land on the first meaningful node at the top.

Applying it

  • Show the control only after about two screens of depth; hide it near the origin so it does not occupy an action slot at y=0.
  • Make the jump fast, and move focus with the viewport to the first interactive or heading node at the start — do not only change the scroll offset.
  • If what is actually needed at the origin is the filter, not visual top, consider “back to filters” rather than blindly y=0.
  • How to check: start from the lower-middle of a long page and allow only the product’s means to reach the filter or title. Time it, and watch for accidental refresh. No control, or a jump so slow people grab the scrollbar, means depth already needed a shortcut. If a short page shows it on arrival, it appeared too early.

Related

  • Within the group: E5.09.2 The control must not cover content or primary actions · E5.09.3 Returning to the top is not going Back
  • Adjacent: E5.01 Top App Bars · E5.07 Infinite Scroll
  • Search terms: back to top · scroll to top · long page navigation

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/E5.09.1