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.
An element with a scroll-behavior value of smooth.
The smooth scrolling is easier to see in the editor.
<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>
<a href="#top">Top</a>
<a href="#middle">Middle</a>
<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>
scroll-behavior: auto | smooth | initial | inherit;
| 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. |
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 | |
