CSS scroll-behavior Property

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:

autoSpecify an instant jump to another section without any animation. This is the default value.
smoothSpecify a slow and animated scroll behavior when jumping to another section.
initialSets the scroll-behavior property to its default value(auto).
inheritInherits the scroll-behavior property from the parent element.

General Info

Default Valueauto
InheritedNo
JavaScript Usageelement.style.scrollBehavior = “smooth”