scroll-behavior
The scroll-behavior property sets whether navigation-triggered scrolling is instant or smoothly animated.
Syntax
scroll-behavior: auto | smooth;
Examples
html {
scroll-behavior: smooth;
scroll-padding-top: 4rem;
}
Output
Clicking in-page anchor links smoothly scrolls to the target with a 4rem offset clear of a fixed header.
Notes
Applies to the scroll container it is set on (commonly html). Pair with scroll-padding-top to offset for sticky headers. Wrap in @media (prefers-reduced-motion: no-preference) to respect motion sensitivity.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 61 |
| firefox | 36 |
| safari | 15.4 |
| edge | 79 |