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

Hura Product Showcase Builder

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.

Hura Theme Blocks

You may also like...

Leave a Reply

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