滚动到最近的 href 选项卡 jquery

Question

我正在尝试单击链接并滚动到我页面上存在的选项卡。 问题是我滚动到的 id 在页面上存在两次。 当我单击滚动触发器时，它会滚动到我想要滚动到的那个之后的 id。 有没有办法使用最近的（）或找到具有特定 ID 的下一个选项卡？

jquery:

   $('.link-to-management').click(function(e) {
        e.preventDefault();
        var linkTo = $(this).attr('href');

        $('html,body').animate({scrollTop:
            $(linkTo).offset().top - 55
        },350);
    });


html: 

 <a href="#to-management-tab" class="link-to-management">
 Assess response, adjust, and review</a>

div scrolling to:

<div class="tab-scroller__nav" id="to-management-tab"></div>

Answer 1

正如您在评论中已经知道的那样，具有相同 ID 的多个元素是不好的。 特别糟糕。 但我明白其中的一部分不在你的控制之下。

所以在这种情况下，我会做的是稍微调整代码以在没有 ID 的情况下工作：

jQuery

$('.link-to-management').click(function(e) {
    e.preventDefault();
    var linkTo = $(this).attr('href');

    $('html,body').animate({scrollTop:
        $('[data-id=" + linkTo + "]').first().offset().top - 55
    },350);
});

HTML

<a href="#to-management-tab" class="link-to-management">
Assess response, adjust, and review</a>

...

<div class="tab-scroller__nav" data-id="#to-management-tab"></div>

我做了什么？

不多，如果你真的需要知道的话。 只是将id更改为data-id这样您就不会因两次使用相同的 ID 而受到惩罚，更新 jQuery 选择器以便它可以处理新的data-id属性，并添加first()以便它选择您提到的第一个元素.