JQuery，滚动到不同div中的元素

Question

我想知道在JQuery中是否有滚动到不同div中的元素的方法。例如，如果我转到example.com/programme#event-2，左边的div应该滚动到元素event“event-2”，右边的div应该滚动到元素id="event-2“。这是我的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>

你可以看看这个Codepen，它将帮助你直观地了解我的问题。谢谢!

Answer 1

下面是示例链接：CODEPEN

首先，重要的是

Id只能使用一次，您可以像class #event-1等一样使用它

第二个我为第一列创建按钮，红色的“滚动”

$(function(){
  var thisOffset = $("#event-5").offset().top; // get element top offset 


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