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 the first month of Shopify for $1.

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.

DEMO

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.

Looking for Shopify Experts?

Hura Apps can help you take your store to the next level

Our team of experienced designers and developers can help you create a beautiful, high-converting Shopify store that will drive sales and increase customer satisfaction. From custom design to app development and optimization, we have the skills and expertise to help you achieve your eCommerce goals.

Get in touch

You may also like...

Leave a Reply

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