jQuery implements the method of smooth scrolling to the specified anchor point

  • 2020-05-19 04:04:59
  • OfStack

The example in this article describes how jQuery implements smooth scrolling to a specified anchor. Share with you for your reference. The details are as follows:

Define the specified anchor anchor, and call the js code below to make the page scroll smoothly to the specified location, which is very useful, such as returning to the top of the page, to the bottom of the page, and so on


// HTML:
// <h1 id="anchor">Lorem Ipsum</h1>
// <p><a href="#anchor" class="topLink">Back to Top</a></p>
$(document).ready(function() {
  $("a.topLink").click(function() {
    $("html, body").animate({
      scrollTop: $($(this).attr("href")).offset().top + "px"
    }, {
      duration: 500,
      easing: "swing"
    });
    return false;
  });
});

I hope this article has been helpful to your jQuery programming.


Related articles: