如何使用 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;
}

我想用 class a將#gran滾動到第三個元素，所以我嘗試了這個但不起作用：

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

我希望在你的幫助:) 非常感謝，對不起我的英語

Answer 1

這是如何做到的

• 您需要設置max-height with overflow: auto以讓元素可滾動而沒有滾動條它將繼續擴展。如果您需要使用文檔/正文滾動條，請使用$('body, html') 平滑滾動到 div id jQuery

• 您需要使用animate() function 和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>