scroll-behavior

The scroll-behavior property designates whether scrolling is smoothly animated or a straight jump when a link is clicked within a scrollable box.

Syntax

Explain the syntax of this reference item and show an example in the code block below. Try to remove as much unnecessary items as possible. It’s important this is easy to process at a glance.

/*
    wrap <code> tags inside <pre> tags to create code blocks like this
*/

Values

auto
Default value. Sets a straight jump “scroll effect” between elements within the scrolling box.

smooth
Sets a smooth animated “scroll effect” between elements within the scrolling box.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of scroll-behavior? Submit a codepen.io demo and we'll showcase it here ↴