Javascript 如何组合这些代码？

正如标题所说，我认为这段代码可以简化为更少的行。有人能帮我吗

    $('a[href=#over]').click(function(){
    $('html, body').animate({
        scrollTop: $("#over").offset().top - 100
    }, 2000);
});

$('a[href=#diensten]').click(function(){
    $('html, body').animate({
        scrollTop: $("#diensten").offset().top - 100
    }, 2000);
});

$('a[href=#portfolio]').click(function(){
    $('html, body').animate({
        scrollTop: $("#portfolio").offset().top - 100
    }, 2000);
});

$('a[href=#contact]').click(function(){
  $("html, body").animate({ scrollTop: $(document).height() }, 2000);
});

$('a[href=#top]').click(function(){
    $('html, body').animate({scrollTop:0}, 2000);
    return false;
});

---

我在想我自己是否需要一个if/elseif声明，但我有点被卡在那里了。那么，您可以看一看吗？

您可以使用锚的

href

属性按ID选择元素

$('a').click(function(){
    var id = this.href;
    $('html, body').animate({
        scrollTop: $(id).offset().top - 100
    }, 2000);
});

---

---

这没有经过测试。我只是简化了（并优化了一点）您的代码

---

因为您只是在整合一个过程，所以有无数的答案。但如果您需要对目标进行微观管理，您可以采取以下措施：

function reusable_scroll_anchor( q_ids, q_off ) {
    for( var q_id in q_ids )(function(q_id) {
        $("a[href=#" + q_id + "]").click(function(){
            $('html, body').animate({
                scrollTop: $("#" + q_id).offset().top - q_off
            }, 2000);
        });
    })(q_ids[q_id]);
}

reusable_scroll_anchor(
    ['over', 'diensten', 'portfolio', 'contact', 'top' ], 
    100
);

---

尽管这种方法需要一些手动维护，但对于未来的站点来说，它是一个可重复使用的代码段。

您尝试过简化它吗？作为提示，对于前三个，您使用的选择器等于元素上

href

属性的值。是的，我尝试过，但是由于#top和#contact与其他3个不同，我被卡住了。您可能需要在其中添加一个if语句。动画if（id=='contact'）{…}else{…}这非常有效，非常感谢！

$('a[href]').click(function(){
    var href = $(this).attr('href');
    var htmlbody = $('html,body');
    if( href == '#over' || href == '#diensten' || href == '#portfolio' )
    htmlbody.animate({ scrollTop: $(href).offset().top - 100 }, 2000);
    if( href == '#contact' )
    htmlbody.animate({ scrollTop: $(document).height() }, 2000);
    if( href == '#top' )
    htmlbody.animate({ scrollTop: 0 }, 2000);
});

$('a').click(function(){

    var id = $(this).attr("href");

    if(id in {"#over": 1, "#diensten": 1, "#portfolio": 1}) {
      $('html, body').animate({ scrollTop: $(this).offset().top - 100 }, 2000);
    } 
    else if(id === "#contact") {
       $("html, body").animate({ scrollTop: $(document).height() }, 2000);
    } 
    else {
      $('html, body').animate({scrollTop:0}, 2000);
      return false;
    }
});

function reusable_scroll_anchor( q_ids, q_off ) {
    for( var q_id in q_ids )(function(q_id) {
        $("a[href=#" + q_id + "]").click(function(){
            $('html, body').animate({
                scrollTop: $("#" + q_id).offset().top - q_off
            }, 2000);
        });
    })(q_ids[q_id]);
}

reusable_scroll_anchor(
    ['over', 'diensten', 'portfolio', 'contact', 'top' ], 
    100
);