Smooth Scrolling with Pure CSS

css
Published on March 20, 2019

It is now possible to set smooth scrolling for a webpage with CSS only, with no Javascript required.

This is done through the scroll-behavior CSS property. Smooth scrolling can be set either to the complete webpage, or to specific elements.

There can be 2 values for scroll-behavior :

  • smooth that applies smooth scrolling
  • auto which is the default instant scrolling.

For smooth scrolling to work on the entire page, scroll-behavior needs to be applied on the root element — html. Setting this on body element won't work.

html {
	scroll-behavior: smooth;
}

For a specific element :

#main-container {
	scroll-behavior: smooth;
}

Demo

Click here to see the demo

Changing the Animation Function of the Scroll ?

You may would like to specify your own animation function for scrolling, but unfortunately it cannot be done. The timing function is defined by the browser itself.

In this Tutorial