How To Create Smooth Scroll With CSS?

CSS provides us a standard property to make a page that scrolls smoothly. This property is called “smooth-behavior”.

The smooth-behavior property for Smooth Scroll in CSS takes four values:

auto smooth initial inherit Auto:

The auto value of smooth-behavior in CSS is the default value of the scroll-behavior which is the direct jump from one element to another.

Smooth:

The smooth value of smooth-behavior for Smooth Scroll in CSS changes the element’s scroll behavior from a direct jump to a smooth transition from one element to another. This was shown in the above image.

Initial:

The initial is the reserved keyword for Smooth Scroll in CSS and not a value specific to scroll-behavior. The initial value sets the default behavior of a property like color, align, etc. In this case, initial and auto will behave in the same way as the auto is the default behavior.

Inherit:

The inherent value inherits the value from the parent element.

To apply smooth scroll with CSS, you need to mention one single line on the element you are trying to scroll smoothly.

scroll-behavior: smooth;

The following piece of code will help:

Read Blog and Download Source Code:- websitemakers.xyz/2021/04/css-scroll-down-a..

HTML Code

CSS Code