滾動到最近的 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()以便它選擇您提到的第一個元素.