Smooth Scrolling with Pure CSS

css
Published on March 19, 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
    Comments
    Loading Comments