CSS scroll-behavior Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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