我怎样才能结合这些代码？ [关闭]

Posted 2023-05-08

【中文标题】我怎样才能结合这些代码？ [关闭]

【英文标题】：How can i combine this codes? [closed]

【发布时间】：2012-09-03 08:12:30

【问题描述】：

正如标题所说，我认为这段代码可以用更少的行来简化。有人可以帮我解决这个问题吗？

    $('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 属性的值。

是的，我试过了，但由于 #top 和 #contact 与其他 3 个不同，我被卡住了。

【参考方案1】：

您可以使用锚点的href 属性按ID 选择元素。

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

---

$('a').click(function(e) 
    e.preventDefault();
    var id = this.href;
    var scroll = '';
    if (id === '#contact') 
       scroll =  $(document).height();
     else if (id === '#top') 
       scroll = 0;
     else 
       scroll = $(id).offset().top - 100;
    
    $('html, body').animate(
           scrollTop: scroll
    , 2000)
);

【讨论】：

您可能需要在 .animate if (id === 'contact') ... else ... 中添加 if 语句

【参考方案2】：

这未经测试。我缩小（​​并优化了一点）只是你的代码。

$('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);
);

【讨论】：

这很好用，非常感谢！

【参考方案3】：

$('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;
    
);

【参考方案4】：

由于您只是在整合一个流程，因此有无数的答案。但如果您需要对目标进行微观管理，您可以执行以下操作：

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
);

虽然这种方法需要一些人工管理，但对于未来的站点来说，它是一个可重复使用的 sn-p。