CSS scroll-behavior property

Definition and usage

The scroll-behavior attribute specifies whether the position of the scrollable box will be scrolled smoothly (with animation effect) when the user clicks on a link within it, rather than jumping straight to the position.

Example

Add smooth scrolling effect to the document:

html {
  scroll-behavior: smooth;
}

Try it yourself

CSS syntax

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

Attribute value

Value Description
auto Default value. Allows direct jumps between elements within the scroll box.
smooth Allows smooth 'scroll effect' between elements within the scroll box.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical details

Default value: auto
Inheritance: No
Animation creation: Not supported. See:Animation-related properties.
Version: CSSOM View Module (Working Draft)
JavaScript syntax: object.style.scrollBehavior="smooth"

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
61.0 79.0 36.0 14.0 48.0