Back to top button
/BAK too TOP BUT-un/ · noun · ACTION pattern · #100
A small button, usually an up arrow in a corner, that appears after you scroll down a long page and takes you back to the top in one tap. It saves a long scroll back to the header and its navigation.
Also called: scroll to top button, go to top button, back to top arrow, jump to top button.
You might call it
- “the arrow that takes you to the top of the page”
- “the button at the bottom right of a website”
- “the scroll to top arrow”
- “the up arrow that appears when you scroll down”
- “the go to top button”
…its name is Back to top button.
Common questions
What is the button that takes you to the top of a page called?
A back to top button (also scroll to top or go to top). It is usually an up arrow in the bottom-right corner that appears once you have scrolled down. On an iPhone you can also tap the status bar at the top of the screen to jump to the top of most scrolling lists.
When does a page need a back to top button?
On long pages — Nielsen Norman Group suggests pages longer than about four screens — such as articles, documentation, search results and long product lists. Show it only after the visitor has scrolled down, keep it small and in a corner, and make sure it does not cover content or other floating buttons.
In code
| Web (HTML / JS) | <a href="#top"> window.scrollTo({ top: 0, behavior: "smooth" }) |
|---|---|
| SwiftUI | ScrollViewReader ScrollViewProxy.scrollTo(_:) |
| UIKit | scrollsToTop Tapping the status bar already scrolls to top on iPhone |
| Jetpack Compose | LazyListState.animateScrollToItem(0) |
| Android (Views) | RecyclerView.smoothScrollToPosition(0) |
| Flutter | ScrollController.animateTo(0) |
Prompt for your AI coding tool
Add a back to top button to this long page: a round button with an up arrow in the bottom-right corner that appears only after the visitor has scrolled about two screens down. Clicking it scrolls smoothly to the top (instantly when reduced motion is preferred) and moves focus to the top of the page. Give it an accessible name, keep it clear of the cookie banner and any chat widget, and do not let it cover content on phones.
More UI words to use when vibe coding →
Related patterns
All the parts of a website, named →