JQuery：滚动在到达元素之前停止

Question

我使用Jquery的scrollTop滚动到一个特定的元素，但奇怪的是，滚动在到达元素之前就停止了。你可以看一下我所做的Codepen。

这是HTML：

<div id="events">
    <div id="event-list">
        <div class="content">
            <h2>Vendredi 17 octobre</h2>
            <ul id="event-1" class="event-title">
                list items
            </ul>
            <h2>Vendredi 21 octobre</h2>
            <ul id="event-2" class="event-title">
                list-items
            </ul>
        </div>
    </div>

    <div id="event-details">
        <div class="content">
            <section id="event-1" class="details">
                stuff
            </section>

            <section id="event-2" class="details">
                stuff
            </section>
        </div>
    </div>
</div>

和jquery：

$(function(){
  var thisOffset = $("#event-2").offset().top;
  console.log(thisOffset)

  $(".scroll").on("click", function(e){
    console.log("scroll")
     $("#event-details .content").animate({
       scrollTop: thisOffset
     }, 1000)
     e.preventDefault();
  });
});

知道为什么以及如何解决这个问题？谢谢！

Answer 1

您只能在html页面中使用相同id的1次。 您使用event-2两次作为id，因此它仅滚动到第一个。

Answer 2

你的代码实际上有两次＃event-2。该codepen按预期滚动到第一个。