Smooth Scrolling with Pure CSS

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

See also  Minimal Flexible CSS Grid Layout - iota.css

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.

Leave a Reply

Your email address will not be published. Required fields are marked *