Throughout the years, I have used JavaScript to achieve smooth scrolling when clicking an anchor link. It does the task done most of the time but doesn't feel polished enough.
Discover scroll-behavior, a native CSS property that offers smooth scrolling transition (all by the power of beautiful CSS) when you click an anchor link in a page.
scroll-behavior: [ auto or smooth ];
The property accepts two values - auto and smooth. It's basically a toggle to enable or disable smooth scrolling. By default, auto offers the usual abrupt jump between anchor links. While smooth offers an animated transition between elements.
To enable smooth scrolling on every anchor link in your website, just add the scroll-behavior property to the HTML tag.
html {
scroll-behavior: smooth;
}
Note: scroll-behavior CSS property currently has limited browser support and works on Chrome 61+, Firefox 36+, Opera 48+ and Edge 79+.