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:


  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:


  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
JavaScript Usageelement.style.scrollBehavior = “smooth”


  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts

Leave a Comment