Interaction
scroll-behavior
scroll-behavior sets whether scrolling triggered by in-page links or JavaScript jumps straight to the target or moves there smoothly. With smooth, it scrolls smoothly to the target position.
Syntax
auto | smoothPreview
123
Presets
Drag the bottom-right corner to resize
Code
.box {
overflow: auto;
scroll-behavior: smooth;
}Controls
scroll-behaviorsmooth
123
About
What the values mean
auto: the initial value. Jumps straight to the target position.smooth: scrolls smoothly over a short time. The browser decides how long it takes and how it moves.
The preview sets it on a box that scrolls through three stacked cards (with the helper overflow: auto). Pressing a number button at the bottom scrolls to the top of that card with JavaScript's scrollTo. With smooth it moves smoothly, and with auto it switches at once.
When to use it
Use it to make in-page links, such as a table of contents or a "back to top" link, scroll smoothly so that readers can tell where they moved.
Watch out
- It does not change scrolling that users do themselves, with the mouse wheel or the scrollbar. It applies when an in-page link moves the view, or when JavaScript such as
scrollToorscrollIntoViewscrolls. - For page scrolling, set it on
html. Setting it onbodydoes not affect page scrolling. - When JavaScript passes
behavior, as inscrollTo({ top: 0, behavior: 'instant' }), that takes priority. - Motion on screen makes some people feel unwell. To avoid smooth scrolling for people who chose to reduce motion in their OS, a common pattern sets
smoothonly inside@media (prefers-reduced-motion: no-preference).