jQuery Smooth Scroll to Anchor

princebazawule.com scroll to anchor

View Demo

We all know that jQuery is a brilliant Javascript library, which can be used to add interactivity to our web pages.

One such interactivity is smoothly scrolling to the appropriate section of your page on clicking a link… Smoooov, right?

The following jQuery snippet can be used to achieves this:


What is happening here?

a[href*="#"]:not([href="#"]) targets all anchors.

On click, it checks that the link is pointing to same page and same domain: (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname).

Remainder of the script sets up the target, then uses scrollTop(); and animate(); to smoothly scroll the web page to that section.

Hopefully this is helpful… Do not hesitate to post any improvements.


JSFiddle Demo

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.