How to create a smooth scrolling effect when clicking an anchor link

Sell Online With Shopify
Trusted by millions of businesses worldwide
Sign up for a free trial and enjoy 3 months of Shopify for $1/month on select plans.

Using anchor links, you can make the page scroll towards the anchor and go to the section there. Is there a way to make that scrolling smooth? Yes, you can with 3 ways.

The new hotness in CSS3. This is a lot easier than every method listed on this page and requires no Javascript. Just enter the below code into you css and all of a sudden links point to locations inside you own page will have a smooth scrolling animation.


Add scroll-behavior: smooth to theelement to enable smooth scrolling for the whole page (note: it is also possible to add it to a specific element/scroll container):

There is also a native JavaScript version of smooth scrolling, like this:

jQuery can also do this. Here’s the code to perform a smooth page scroll to an anchor on the same page.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *