CSS Smooth Scrolling Using Scroll Behavior Property
Transform Your Website's Scrolling experience more smoother using CSS scroll behavior property
Published
CSS Smooth Scrolling Using Scroll Behavior Property
When we use scrolling on a webpage it’s immediate and quick jump to specified content. However, you can make this process smoother using CSS scroll-behavior Property.
When the user clicks on a link within a scrollable box the default value of CSS scroll-behavior property auto that makes it like immediate scroll to that content. If you set this value to smooth like scroll-behavior: smooth; the scrolling happens smoothly. Please make sure you apply this with html tag.
html {
scroll-behavior: smooth;
}
Please note CSS scroll-behavior only works with html tag. If you apply it on body tag it won’t work.
Browser suported: Chrome 61.0, Firefox 36.0
Browser not supported: IE/Edge, Safari