CSS scroll-behavior property specifies the scrolling behavior when you jump from one section to the other in a web page.
CSS has two types of scroll-behavior, auto and smooth.
When you use scroll-behavior: auto;, CSS does not add any animation or speed and instantly jumps to that particular section. But, if you use scroll-behavior: smooth;, CSS adds a certain speed and animation to move to that particular section. See the example below:
Example:
html{
scroll-behavior: smooth;
}
If you use scroll-behavior: auto;, you will be instantly moved to that section without adding any animation or speed. Refer to the example below:
Example:
html{
scroll-behavior: auto;
}
CSS Syntax
The scroll-behavior property has the following syntax:
scroll-behavior: auto|smooth|initial|inherit;
Property Values
The scroll-behavior property accepts the following values:
| auto | Specify an instant jump to another section without any animation. This is the default value. |
| smooth | Specify a slow and animated scroll behavior when jumping to another section. |
| initial | Sets the scroll-behavior property to its default value(auto). |
| inherit | Inherits the scroll-behavior property from the parent element. |
General Info
| Default Value | auto |
| Inherited | No |
| JavaScript Usage | element.style.scrollBehavior = “smooth” |
