JQuery:到达元素前的滚动停止

Question

我使用Jquery的scrollTop滚动到特定的元素，但奇怪的是，滚动在到达元素之前停止。你可以看看我做的科德芬。

下面是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页面中只能使用1次相同的id。您将event-2作为id使用两次，因此它只滚动到第一个。

Answer 2

实际上，代码中有#event-2两次。代码按预期滚动到第一个。