Question

我在我的单页网站上进行水平导航，这在某个航点上变成了一个粘性导航。现在我创建了一个工作滚动导航，看起来像这样

$(document).ready(function () {
    $("#button0").click(function() {
        $('html, body').animate({
            scrollTop: $("#ziel_top").offset().top
        }, 2000);
    });
    $("#button1").click(function() {
        $('html, body').animate({
            scrollTop: $("#ziel_1").offset().top-100
        }, 2000);
    });
    $("#button2").click(function() {
        $('html, body').animate({
            scrollTop: $("#ziel_2").offset().top-100
        }, 2000);
    });
    $("#button3").click(function() {
        $('html, body').animate({
            scrollTop: $("#ziel_3").offset().top-100
        }, 2000);
    });
    $("#button4").click(function() {
        $('html, body').animate({
            scrollTop: $("#ziel_4").offset().top-100
        }, 2000);
    });
});

现在我的问题是，是否有一种简化此功能的方法？任何想法赞赏

Answer 1

此？

for (var i=0;i<5;i++)
{
   $("#button" + i).click(function() {
      $('html, body').animate({
        scrollTop: $("#ziel_" + i).offset().top-100
      }, 2000);
    });
}

Answer 2

假设所有#button实际上都是按钮：

$(document).ready(function () {
    $("a[id^=button]").click(function() {
        var id=$(this).attr('id');
        id=id.substr(id.length-1);
        if(id==0){
            $('html, body').animate({
                scrollTop: $("#ziel_top").offset().top
            }, 2000);
        }
        else{
            $('html, body').animate({
                scrollTop: $("#ziel_"+id).offset().top
            }, 2000);
        }
    });
});

Answer 3

这是一个无耻的插件，但你可以使用jquery.localScroll。您只需要一行js，然后在HTML上设置导航（即使禁用了JS也可以使用）。

简化jquery粘滞菜单滚动到功能

3 个答案: