Back to Top Button
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.
BackTop
You can say this to an AI Agent
Show a Back to top button after the product list scrolls beyond one screen and return users to the filter area. Avoid support and bottom purchase actions, hide it on short pages, and test mobile safe areas, keyboard focus, and reduced motion.
When to use it
- Long article↑
- Long catalog or feedAll states↑
- Documentation page↑
- A page whose main controls are at the top↑Appears after you scroll far enough
When NOT to use it
- Show it before the user scrolls
- Use it on a short pageSubmit↑
- 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
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Quick check