Navigation & structure

Back to Top

Q: How do people describe a Back to Top in plain words?

the little rocket that appears after I scroll a long way one-tap back to the very top of the page the up-arrow that only shows once I've scrolled down

Q: How do I implement a Back to Top?

Add a back-to-top control: hidden until ~1.5 viewports scrolled (IntersectionObserver on a sentinel, not a scroll listener), fade in bottom-right above the safe area, scrollTo with smooth unless prefers-reduced-motion, then move focus to the page top landmark.

A control that appears after a long scroll and jumps the user back to the top of the page.

Also known as scroll to top · return to top · top jumper

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Back to Top".

Add a back-to-top control: hidden until ~1.5 viewports scrolled (IntersectionObserver on a sentinel, not a scroll listener), fade in bottom-right above the safe area, scrollTo with smooth unless prefers-reduced-motion, then move focus to the page top landmark.

Anatomy:
- visibility threshold: Show after ~1–2 viewports—don’t park it on first paint.
- smooth scroll: Instant jump disorients; still honor prefers-reduced-motion.

Preferred API / pattern: `window.scrollTo / custom IntersectionObserver toggle`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: scroll listener every frame for show/hide
○Avoid: Focus left on the button after it hides
○Avoid: Long smooth scroll under reduced-motion
○Avoid: Always-visible control on short pages

In plain wordsHow people search for it

“the little rocket that appears after I scroll a long way”“one-tap back to the very top of the page”“the up-arrow that only shows once I've scrolled down”

AnatomyOpen for part names

visibility threshold: Show after ~1–2 viewports—don’t park it on first paint.
smooth scroll: Instant jump disorients; still honor prefers-reduced-motion.

How to write itOpen for stack patterns

Web (HTML/CSS)scrollTo({ top: 0, behavior: "smooth" })

React + Tailwind + shadcn/uiwindow.scrollTo / custom IntersectionObserver toggle

SwiftUIScrollViewReader.scrollTo

Ant Design<FloatButton.BackTop visibilityHeight />

Notes

Two engineering traps: use IntersectionObserver on a sentinel near the first fold—not a rAF scroll listener tax—and respect reduced-motion by using behavior: "auto" for the jump. After scrolling, move focus to a top landmark so keyboard users are not stranded on a disappearing button. On mobile, double-tapping the tab bar to return top is a familiar hidden habit worth supporting when you have a tab bar.

Common mistakesHumans and models trip here

scroll listener every frame for show/hide: janks low-end devices—use IntersectionObserver.
Focus left on the button after it hides: keyboard focus falls into the void—return focus to top.
Long smooth scroll under reduced-motion: among the worst vestibular animations.
Always-visible control on short pages: covers content for no benefit.

More failure symptoms on AI broke it.

Related patterns

FAB (Floating Action Button)A circular primary action fixed over content—usually bottom-right—reserved for the screen’s one main create action.

Spotted a wrong name or missing pattern?

Message on X