Top of page

Smooth scroll to an anchor link using CSS

Varmapublished on February 9, 2020 & last updated on September 14, 2020

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+.

In DigitalOcean

Free $100 DigitalOcean credit for Cloud Hosting

Exclusive - Get free $100 DigitalOcean credit on your new account which is good for 60 days usage to spin up a Droplets, Cloud Servers, Managed Databases, Kubernetes, Block Storage, Load Balancers and much more.

$100 FREE Deal
NO CODE NEEDEDGet this deal

In NameCheap

All-In-One Package Deal & Save Big at NameCheap with up to 86% OFF

It's All-In-One Package Deal and Save Big at NameCheap and you can get up to 86 per cent discount on domains, business e-mails, hosting, VPN and SSL certificate. Get top business domains like .com. .net, .co, .store, .online, .shop, .digital, .services etc. 100% Free domains available including .store, .online, and .site

86% OFF Deal
NO CODE NEEDEDGet this deal

Related Articles

Fetching coffee...