scroll-behavior

Avatar of Geoff Graham
Geoff Graham on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

The scroll-behavior property in CSS allows us to define whether the scroll location of the browser jumps to a new location or smoothly animates the transition when a user clicks a link that targets an anchored position within a scrolling box.

html {
  scroll-behavior: smooth;
}

Deeper Explanation

Wait, wait, what’s this scrolling box we speak of? It’s an element with content that overflows its bounds.

See the Pen Scrolling Box by CSS-Tricks (@css-tricks) on CodePen.

Notice how the box in the demo above has a fixed height of 200px? Any content that exceeds that height is outside the bounds of the box and we’ve added overflow-y: scroll to make that additional content accessible with vertical scrolling. That is what we mean by a scrolling box.

Now let’s say we add a navigation to the top of the box with each link targeting the three sections of content:

See the Pen Scrolling Box w/Nav by CSS-Tricks (@css-tricks) on CodePen.

Each link takes the user directly to the different sections of content inside of the scrolling box. By default, that transition between is an abrupt jump.

The jump between content is abrupt and sudden by default.

That sort of a jump can be jarring. That’s where scroll-behavior comes in and allows us to set a smooth scrolling transition. This sort of thing used to take fancy Javascript but scroll-behavior will give us the ability to do that natively in CSS, once browser support improves.

The jump between content is animated in a smooth transition.

Syntax

.module {
  scroll-behavior: [ auto | smooth ];
}

Values

The scroll-behavior property accepts two values, which essentially toggle the smooth scrolling feature on and off.

  • auto (default): This value allows the abrupt jump between elements within the scrolling box.
  • smooth: True to its name, this value is the smooth animated transition between elements within the scrolling box.

Demo

The following demo will only work on Chrome 61+, Firefox 36+, and Opera 48+ at the time of this writing.

See the Pen Scrolling Box w/ `scroll-behavior` by CSS-Tricks (@css-tricks) on CodePen.

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
6136No7915.4

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
12212312215.4

More Information