CSS scroll-behavior Property

The scroll-behavior property sets the scroll animation style.

Scrolling can be instant, or it can be an animated scroll to the target.

Not all browser support this property.

Example

#

An element with a scroll-behavior value of smooth.
The smooth scrolling is easier to see in the editor.

   Top    Middle    Bottom

Top
Middle
Bottom
<style>
  .box {
    height: 200px;
    vertical-align: middle;
    background-color: aliceblue;
  }

  .scroller {
    height: 200px;
    width: 200px;
    border: 1px solid #ddd;
    overflow-y: auto;
    scroll-behavior: smooth;
  }
</style>


<div>
  <div>
    &nbsp;&nbsp;
    <a href="#top">Top</a> &nbsp;&nbsp;
    <a href="#middle">Middle</a> &nbsp;&nbsp;
    <a href="#bottom">Bottom</a>
  </div>
  <br />
  <div class="scroller">
    <div id="top" class="box">Top</div>
    <div id="middle" class="box">Middle</div>
    <div id="bottom" class="box">Bottom</div>
  </div>
</div>


Syntax

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

Values

#

Value Description
auto Default. Allows a straight jump "scroll effect" between elements within the scrolling box.
smooth Allows a smooth animated "scroll effect" between elements within the scrolling box.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Browser support

This table shows when scroll-behavior support started for each browser.

Chrome
61.0 Sep 2017
Firefox
36.0 Feb 2015
IE/Edge
Not Supported
Opera
48.0 Sep 2017
Safari
Not supported

You may also like

Guides