如何使用 jquery 滚动到第 n 个孩子？

Question

您好，使用Jquery 如何将元素（使用overflow）滚动到子元素？

<span id="gran">
 <span id="parent">
  <div class="a">
   Casa
  </div>
  <div class="a">
   Casa
  </div>
  <div class="a">
   Casa
  </div>
  <div class="a">
   Casa
  </div>
  <div class="a">
   Casa
  </div>
 </span>
</span>

#gran {
overflow: auto;
}

我想滚动 #gran 到类 a 的第三个元素，所以我尝试了这个但不起作用：

 $("#gran").scrollTo('#parent > div:nth-child(3)'); 

希望得到你的帮助 :) 非常感谢，对不起我的英语

Answer 1

这是可以做到的

• 您需要设置max-height 和overflow : auto 以使元素可滚动，否则它将在没有滚动条的情况下继续扩展.. 如果您需要使用文档/正文滚动条，请使用$('body , html') Smooth scroll to div id jQuery

• 您需要将animate() 函数与scrollTop 和offset()/position() 一起使用

//$("#gran").scrollTo('#parent > div:nth-child(3)');

$(document).ready(function(){
  $('#gran').animate({
      scrollTop: - $('#gran').offset().top + $("#parent > div:nth-child(3)").offset().top
  }, 2000);
});

#to_remove{
  background : red;
  height : 100px;

}

#gran {
overflow: auto;
max-height : 500px;
}
.a{
  height : 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="to_remove"></div>

<div id="gran">
 <div id="parent">
  <div class="a">
   Casa 1
  </div>
  <div class="a">
   Casa 2
  </div>
  <div class="a">
   Casa 3
  </div>
  <div class="a">
   Casa 4
  </div>
  <div class="a">
   Casa 5
  </div>
 </div>
</div>