CSS scroll-behavior Property

❮ Previous Complete CSS Reference Next ❯

Example

Add a smooth scrolling effect to the document:

html {
scroll-behavior: smooth;
}

Definition and Usage

The scroll-behavior property specifies whether to smoothly animate the scroll position, instead of a straight jump, when the user clicks on a link within a scrollable box.

Default value:	auto
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSSOM View Module (Working Draft)
JavaScript syntax:	object.style.scrollBehavior="smooth" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
scroll-behavior	61.0	79.0	36.0	14.0	48.0

CSS Syntax

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

Property Values

Value	Description
auto	Allows a straight jump "scroll effect" between elements within the scrolling box. This is default
smooth	Allows a smooth animated "scroll effect" between elements within the scrolling box.
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

❮ Previous Complete CSS Reference Next ❯