Home >CSS >CSS reference – properties, selectors, functions >scroll-behavior

scroll-behavior

scroll-behavior: auto | smooth

With smooth the browser does not jump to the target of an #anchor link or to the place given in scrollTo() and scrollIntoView(), but scrolls to it smoothly. It does not change scrolling with the mouse wheel, a finger or the keys. For the whole page it is written on html.

Values

auto – an instant jump.
smooth – smooth scrolling; the browser sets its duration and course.

Initial value: auto. Inherited: no. Applies to: scroll containers; for scrolling the whole page html.

Examples

Smooth scrolling to anchors, turned off for readers who have reduced animations in their system:

<a href="#contact">Go to contact</a>
…
<h2 id="contact">Contact</h2>

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

The result: after clicking the link the page scrolls smoothly to the Contact heading. With reduced animations turned on in the system it jumps straight there.

Things to watch out for

It does not work on body for scrolling the page – the page is scrolled by the viewport and that follows the value on html.
Scrolling from JavaScript is asynchronous with smooth: right after scrollTo(0, 500), scrollY still has the original value. You can force an instant jump with the option behavior: 'instant'.
Smooth scrolling across a long page can bother people sensitive to motion – turn it off by prefers-reduced-motion.

Browser support

Baseline – widely available: in all major browsers since March 2022, considered widely available since September 2024. Since version: Chrome 61, Firefox 36, Safari 15.4. As of October 2026 (MDN browser-compat-data).