CSS scroll-behavior Property

Description

The scroll-behavior CSS property is used to define the scrolling behavior of an element with a scrollable content area. When applied to an element, it determines how the scrolling action will take place when a user interacts with that element. The property accepts two values: "auto" and "smooth." Setting it to "auto" allows the default browser scrolling behavior, where the content jumps instantly to the target position. Conversely, setting it to "smooth" creates a smooth and animated scrolling effect, making the transition between scroll positions more visually pleasing and user-friendly. This property is particularly useful for enhancing the user experience on websites by providing a more polished and fluid scrolling effect.

Initial value: auto
Applies to: scrolling boxes
Inherited: no
Computed value: as specified
Animatable: no
JavaScript syntax: object.style.scrollBehavior

Interactive Demo

scroll-behavior: auto;

scroll-behavior: smooth;

Scroll to: A B C

Syntax

scroll-behavior: auto | smooth

Values

autoThe scrolling box scrolls instantly.
smoothThe scrolling box scrolls in a smooth fashion using a user-agent-defined easing function over a user-agent-defined period of time. User agents should follow platform conventions, if any.

Example

HTML

<nav>

  <a href="#page-1">1</a>

  <a href="#page-2">2</a>

  <a href="#page-3">3</a>

</nav>

<div class="scroll-container">

  <div class="scroll-page" id="page-1">1</div>

  <div class="scroll-page" id="page-2">2</div>

  <div class="scroll-page" id="page-3">3</div>

</div>

CSS

a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav,
.scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
.scroll-container {
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
.scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}

Result

Editor