CSS · Interaction and accessibility

Scroll behaviour

Makes in-page scrolling animate. Pair it with reduced-motion media queries.

cssRunnable example css course

Syntax

scroll-behavior: smooth

Example

Try it

html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

Reference pages are the quick answer. The course explains the why, shows the full example and ends with a challenge.