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是＆＃39; href＆＃39;中的完整链接。属性（例如，htref =＆＃34; http：//kremlin.ru/#putin"（而不仅仅是#putin））然后脚本无法工作！为了使脚本可以与href中的任何类型的链接一起使用，您需要解析该属性并删除所有内容，如果在标记之前＃＆＃39;＃＆＃39; 这是完全有效的：

$(".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;
   }
});

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

2 个答案: