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;
}
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.