Add Smooth Anchor Scrolling to a Web Page with jQuery

When browsing some websites, we notice that clicking a link in the navigation bar causes the page to scroll very smoothly to the corresponding position farther down the page. Compared with the browser’s default behavior of jumping there instantly, the user experience is obviously much friendlier. In fact, this effect only requires a very simple piece of jQuery code.

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

Combined with a back-to-top click feature, you can produce a very attractive single-page navigation effect with a much better user experience.