jquery - 使用 jQuery 使用命名锚点执行页面的平滑滚动？

Question

我正在开发一个单页网站，并希望在每个部分都包含命名锚点。

我也想要它，所以当您单击导航上的超链接时，它会平滑地向下/向上滚动页面，而不是快速跳转。

我可以使用的最简单的复制和粘贴类型的 jQuery 脚本是什么？

谢谢

Answer 1

这是一个快速的小脚本，应该可以解决问题：

替换a为导航中链接的选择器。我发现滚动body, html使滚动更流畅

$('.nav_item').click(function(e){
    e.preventDefault(); //used to prevent default actions
    var _this = $($(this).attr('href'));
    $('body, html').animate({
        scrollTop: _this.offset().top
    }, 400) // how ever fast you want it to scroll.

});

Answer 2

这不是一个真正精确的脚本。如果 htere 是 'href' 属性中的完整链接（例如， htref="http://kremlin.ru/#putin" （而不仅仅是 #putin) ），那么脚本将不起作用！为了脚本可以使用 href 中的任何类型的链接，您需要解析属性并删除标记“#”之前的所有内容，这是完全可以使用的：

$(".scroll").click(function(e){
       e.preventDefault(); //used to prevent default actions
    var linker = $(this).attr('href');
    var linkerN=linker;
        linkerN=linkerN.replace(/^.*\#/, '');
        // alert(linkerN);
     if(linker.indexOf('#') > 0){

        $('body, html').animate({
        scrollTop: $('a'+'[name='+linkerN+']').offset().top}, 400);
    }
    else{
    //alert ('no "#" in link, going to go to:'+linker);
    window.location.href=linker;
   }
});