Design Scroll Into View Behavior

Motion & Interaction · motion, navigation, focus

Updated 2026-07-28

Scroll only when the user has done something that implies it. Moving the page on its own is disorienting, and it is worst for the people who are slowest to re-find their place.
Leave breathing room around the target. Scrolling an element to the exact top edge hides its heading behind a sticky bar and cuts it off from its context.
Prefer the smallest movement that works. If the target is already visible, do nothing, and if it is just below the fold, nudge rather than jumping.
Scroll to the right thing on error. After a failed submit, move to the first invalid field with its label and message in view, not to the top of the form.
Keep animation short and honour reduced motion. A long smooth scroll across a tall page is a slow way to make some users feel sick.
Do not scroll while the user is scrolling. A late-arriving section that repositions the page cancels their gesture and loses their place.
Handle the container as well as the window. Inside a scrollable panel, the element must be brought into view within the panel rather than dragging the whole page.
Pair scrolling with focus where it matters. Bringing something into view without focusing it means keyboard users see the target but are still somewhere else.

Automatic scrolling is a strong action, so it should always be an answer to something the user just did.