Smooth Scroll Effect to anchor – jQuery

Add a smooth scroll effect to an anchor with this simple jQuery snippet.

You need to define a link and then an item with the anchor ID.

In the example below it uses a class to identify the link. You could remove it or change it to your needs.

HTML

<h1 id="anchor">Lorem Ipsum</h1> <a href="#anchor" class="topLink">Back to Top</a>
Code language: HTML, XML (xml)

jQuery

$(document).ready(function () { $("a.topLink").on("click", function (event) { $("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top + "px" }, { duration: 500, easing: "swing" }); return false; }); });
Code language: JavaScript (javascript)

About Ricard Torres

Senior Front-end Software Engineer at Netcentric, from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

@ricard_dev @ricard_dev

📝 Blog 🎙 Podcast

6 comments

Leave a Reply

Add <code> Some Code </code> if you need to.

*
*