CSS scroll-behavior Property

Last Updated : 28 Aug, 2024

This property is used for smooth animation of scroll position instead of a scroll jump. When the user clicks on links it smoothly performs its operation. It is used to visit one link to another link within a scrollable box.

Syntax:

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

Default Value: auto

Property:

smooth: This property is used to specify the animation effect of the scroll between the elements within the scrollable box.
auto: It is used to specify the straight jump scroll effect visiting one link to another link within a scrolling box.

Example: In this example, we use scroll-behavior: smooth; property.

Output:

👁 Image

Example: In this example, we are using scroll-behavior: auto; property.

Output:👁 Image

Supported Browsers: The browsers supported by scroll-behavior Property are listed below: