Scroll Behavior Property
Last updated: 2026-09-13
scroll-behavior Scroll Behavior Property
The scroll-behavior property controls whether scrolling jumps to a destination instantly or animates smoothly. With smooth, clicking an anchor link or scrolling from JavaScript glides to the target position instead of jumping, noticeably improving the user experience.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
scroll-behavior: auto | smooth;⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | smooth | Keyword | The scroll behavior |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| scroll-behavior | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： Setting scroll-behavior: smooth on the html element or the root scrolling container applies it globally.
Warning： Smooth scrolling respects the user's prefers-reduced-motion accessibility setting; if the user has enabled reduced motion, the browser automatically ignores the smooth value.
❓ FAQ
QDoes scroll-behavior: smooth affect window.scrollTo() in JavaScript?
AYes. As long as the scrolling container has scroll-behavior: smooth, window.scrollTo, scrollBy, and scrollIntoView scroll smoothly by default; you can also explicitly pass { behavior: 'smooth' } in JavaScript to override. Note that anchor jumps happen on the nearest scrolling container.
QWhy is my CSS smooth scroll not working on the web page in the browser?
ADebug in order: check that the property is on the element that actually scrolls (page-level scrolling is html, inner scrolling is the overflow element); check whether the system's prefers-reduced-motion: reduce overrides it (reduced-motion settings force smooth to be ignored); and check whether JavaScript overrides the default with behavior: 'auto'.
QDoes the scroll-behavior: smooth property affect page performance?
ASmooth scrolling is implemented natively by the browser and the scroll runs on the compositor thread without blocking the main thread, so the performance cost is tiny. However, if heavy reflows or repaints happen during the scroll — lazy-loaded images, scroll listeners that change styles — it can still stutter. Avoid expensive work in scroll events, or use passive listeners to optimize.
QWhat is the difference between scroll-behavior and JavaScript smooth scrolling?
Ascroll-behavior: smooth is driven natively by the browser: no JavaScript needed, good performance, and it automatically respects prefers-reduced-motion. JavaScript (manually scrolling with requestAnimationFrame) gives more control — custom easing, scrolling to exact offsets — but requires more code. When CSS can do the job, prefer CSS.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
