scroll-behavior

Sets the behavior for a scrolling box when scrolling is triggered by navigation or CSSom scrolling APIs. smooth creates a nice transition instead of an instant jump.

It is documented as part of the CSS Overflow specification.

/* Usage Example */
html {
  scroll-behavior: smooth;
  /* enables smooth scrolling for anchor links page-wide */
}

/* Syntax */
scroll-behavior: auto;
scroll-behavior: smooth;

/* Global values */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: revert;
scroll-behavior: revert-layer;
scroll-behavior: unset;
Widely available Since 2022 95% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.

61+
36+
15.4+
79+
Kinsta

Your first month is free

Managed WordPress hosting for faster sites.

Learn more

New CSS drops.

Join 600+ readers who've survived clearfix hacks.

ESC