Back to Top Appear
A return control lifts into the corner once the reader is deep enough for it to matter.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useRef, useState, type UIEvent } from "react";
import { animate, AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Back to Top Appear
*
* The return control stays out of the way until the reader is deep
* enough for it to be worth something, then lifts into the corner.About this pattern
The smallest useful piece of navigation on a long page, and the one most often done badly. The control is absent — not faded, not disabled — until the scroll passes a threshold that means the reader has genuinely travelled, then it lifts into the corner on a hard-damped spring and stops. It leaves faster than it arrives, because a control that lingers on the way out reads as reluctant. The corner of the eye is the hardest place in an interface to put movement, so there is exactly one settle here and no bounce at all; the press itself gets a small compression instead, which is felt rather than watched. The journey home is an eased glide with a long tail, so the reader can still recognise what went by.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Document page
A corner control that only appears once a thread has been scrolled a fair way.
Related patterns
- Anchor Scroll HighlightJumping to a section briefly washes its background so the eye lands in the right place.
- Scroll Progress BarA hairline on the top edge tracks how far through a long article the reader has come.
- Floating Action ExpandThe round action button opens into a labelled list of actions that climb out of it, nearest first.