BackTop
You might say
After someone scrolls way down, show a button in the bottom right that takes them back to the top.
Return quickly to the top of a long pageA back-to-top control is useful after substantial scrolling, especially when important navigation sits at the top. Keep it out of the way and reveal it only after the user has moved far enough. It does not solve a poorly structured page.
When to use it
- Long article
- Long catalog or feed
- Documentation page
- A page whose main controls are at the top
When NOT to use it
- Show it before the user scrolls
- Use it on a short page
- Cover mobile content or another floating action
- Treat it as a replacement for clear navigation and sections
Anatomy
The button appears after the reader scrolls down the page
Fix it in the lower-right corner; clicking scrolls smoothly to the top
Use a clear upward arrow; add text when the meaning is unclear
Variants
Circle
A compact default for standard pages
Square
When the interface has a strong visual style, match its other buttons
With Text
When you need to clearly explain what a button does
Typical use cases
Long article
🎧
Noise Canceling Headphones Pro
¥ 899
🎒
Outdoor backpack
¥ 239
Product catalog
Mountain Life: Weekend Hiking Equipment Checklist
Read 3.2k · About 8 minutes
↑
Documentation
↑
Activity feed