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

Answer 2

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