Implementing CSS scroll behavior

Published on Jun 2 2016

This website uses smooth-scroll features which may not be fully supported in all web browsers (2016).

The scroll-behavior CSS property specifies the scrolling behavior for a scrolling box, when scrolling happens due to navigation or CSSOM scrolling APIs. Any other scrolls, e.g. those that are performed by the user, are not affected by this property. When this property is specified on the root element, it applies to the viewport instead.

  • Supported in Firefox (Gecko) 36+.
  • Supported in Chrome by enabling the "Smooth Scrolling" or "Enable experimental web platform features" flag in chrome://flags.

The following CSS example produces smooth scrolling for anchor elements or a go to page top or bottom script.

html{scroll-behavior: smooth;}

Syntax

scroll-behavior: auto;
scroll-behavior: smooth;

/* Global values */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;

reference

https://developer.mozilla.org/en/docs/Web/CSS/scroll-behavior


Updated by db Jun 6 2016 , filed under CSS