scroll-behavior
Whether jumps to anchors and scrolling from code happen instantly or smoothly.
Syntax
scroll-behavior: smooth;Values
| Parameter | Type | Description |
|---|---|---|
| auto | keyword | Instantly (the default). |
| smooth | keyword | Smoothly animated. |
Examples
A smooth jump inside a scrolling block:
<div style="height: 120px; overflow: auto; scroll-behavior: smooth; border: 1px solid gray;">
<a href="#end">Go to the end</a>
<p style="height: 300px;">A long block…</p>
<p id="end">The end. <a href="#">Back to the top</a></p>
</div>Notes
For the whole page, set it on html. Some people get dizzy from motion, so wrap it in @media (prefers-reduced-motion: no-preference).
See also
- scroll-margin — Extra space kept around an element when the page scrolls to it — so it does not end up under a fixed header.
- :target — Matches the element whose `id` equals the fragment in the address after `#`.
- scroll-snap-type — Makes a scrolling container stop exactly at its children — for sliders and galleries.
Related recipes
In the tutorial
- Scrolling — Smooth scrolling with scroll-behavior, scroll-margin-top for anchors under a sticky header, a scroll-snap carousel and overscroll-behavior.