Back to Top Button

What it does

The back-to-top button is the small courtesy every long page owes its readers: after a good scroll, a little button appears, and one tap glides them home. Nobody misses it on short pages, everybody wants it on long ones.

• Hidden until it's earned: it only appears after real scrolling, and hides again near the top.
• It fades in and out gently instead of popping, a real button, comfortable to tap.
• The glide is smooth, or instant for people who prefer less motion.
• Keyboard readers land at the top of the page, not lost mid-air.
• It defaults to the bottom right, with a setting to swap corners, and an offset keeps it clear of chat bubbles and cookie banners.
• It slides out of the way of footer buttons instead of sitting on them.

How it works

1. 01

   Pick the shape, a round icon button or a little pill with a label.

2. 02

   Slide when it appears, from half a screen of scrolling to two full screens.

3. 03

   Copy the prompt, a pocket-size plan for your AI, into whichever AI you use.

4. 04

   Scroll a long page as a test: the button should fade in at your chosen depth and fade back out near the top.

5. 05

   Tap it and check where you land: at the very top, with keyboard focus parked on the headline.

6. 06

   Scroll all the way down too: near the footer it should shift up politely instead of covering your last buttons.

What you can customize

• Shape: round is the quiet classic; the pill with a label is friendlier for audiences who like their buttons labeled.
• Appear threshold: half a screen offers help early; two screens saves it for genuinely long reads where it's earned.
• Color, corner, and size adapt to your site automatically, because your AI builds the button right inside your own design, corner and all.