CSS scroll-behavior Property

The CSS scroll-behavior property defines whether the scroll behavior should be smooth or abrupt within a scrollable box.

This property does not have an effect on scrolls performed by the user. The scroll-behavior property specified on the body element will not propagate to the viewport. It should be specified for the html element.

User agents can ignore this property.

Initial Value	auto
Applies to	Scrolling boxes.
Inherited	No.
Animatable	No.
Version	CSSOM View Module (Working Draft)
DOM Syntax	object.style.scrollBehavior = “smooth”;

Syntax

scroll-behavior: auto | smooth | initial | inherit;

Example of the scroll-behavior property with the “auto” value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        scroll-behavior: auto;
      }
      #element1 {
        height: 600px;
        background-color: #ccc;
      }
      #element2 {
        height: 600px;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Scroll-behavior property example</h2>
    <div class="main" id="element1">
      <h2>Element 1</h2>
      <a href="#element2">Click to scroll to Element 2</a>
    </div>
    <div class="main" id="element2">
      <h2>Element 2</h2>
      <a href="#element1">Click to scroll to Element 1</a>
    </div>
  </body>
</html>

Example of the scroll-behavior property with the “smooth” value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        scroll-behavior: smooth;
      }
      #element1 {
        height: 600px;
        background-color: #ccc;
      }
      #element2 {
        height: 600px;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Scroll-behavior property example</h2>
    <div class="main" id="element1">
      <h2>Element 1</h2>
      <a href="#element2">Click to scroll to Element 2</a>
    </div>
    <div class="main" id="element2">
      <h2>Element 2</h2>
      <a href="#element1">Click to scroll to Element 1</a>
    </div>
  </body>
</html>

Try it Yourself »

Values

Value	Description
auto	There is a abrupt scroll behavior between the elements.
smooth	There is a smooth scroll behavior between the elements.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.