CSS scroll-behavior 属性

Definition and Usage

The scroll-behavior attribute specifies whether the scrolling position is scrolled smoothly (with animation) when the user clicks on a link within a scrollable box, instead of jumping straight to the position.

Example

Add smooth scrolling effect to the document:

html {
  scroll-behavior: smooth;
}

Try it yourself

CSS Grammar

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

Attribute value

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

Technical details

Default value: auto
Inheritance: No
Animation production: Not supported. See also:Animation-related properties.
Version: CSSOM View Module (work draft)
JavaScript Grammar: object.style.scrollBehavior="smooth"

Browser Support

Ang mga numero sa talahanayan ay nagpapaalaman ng unang bersyon ng browser na ganap na sumusuporta sa katangian na iyon.

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