When we browse some websites, we will find that when you click on the link in the navigation bar, the page will be very smooth scrolling page below the corresponding position, compared to the default browser jump over, the user experience is undoubtedly much more friendly, in fact, to display this effect only requires a 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;
      }
    }
  });
});

in conjunction withClick to go back to the topfunction, a very beautiful cut user experience is very friendly single page navigation effect came out.