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.


<h1 id="anchor">Lorem Ipsum</h1>
<a href="#anchor" class="topLink">Back to Top</a>


$(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;

Leave a Reply

Add <code> Some Code </code> by using this tags.