Top of page

Smooth scroll to an anchor link using CSS

Varmapublished on February 9, 2020 & last updated on November 24, 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

Discounted COM, NET, ORG, BIZ, INFO domain Registrations and Transfers

Get discount on .com, .net, .org, .biz, .info domain names on Registrations and Transfers at NameCheap.

LOWEST Coupon
BUNDLZDOMS CopyGet this deal

Related Articles

Fetching coffee...

{}