javascript - 滚动到 Li Javascript

Question

我想在一个由 UL 和 LI 元素构造的固定 div 中自动化滚动条。我发现了这个建议 $('#yourUL').scrollTop($('#yourUL li:nth-child(#)').position().top); 但它不适用于我。

<div class="download-section">
   ...
   <div class="panel-body" style="max-height: 300px;overflow-y: scroll;">
      <ul class="list-group" id="ulid">
         <?php include 'myextraction.php';?>
      </ul>
   </div>
   <script src="https://code.jquery.com/jquery-1.10.2.js">
      $('#ulid').scrollTop($('#ulid li:nth-child(#)').position().top);
   </script>
   ...
</div>

我的“li”按日期升序排列(最近的在底部)。我想在给定日期的情况下自动滚动到下一个 li。例如，今天是 12 月 26 日，下一个事件是 1 月 31 日。因此我想滚动到1月31日对应的li

https://jsfiddle.net/jojo1994/g0nmye8m/

Answer 1

您选择的是 ul 标签，而您的 parent div 有一个 overflow-y，它会在内容溢出时添加滚动条，因此请将您的选择器从#ulid 到 .panel-body。

来自

$('#ulid').scrollTop($('ul > li:nth-child(#)').position().top);

给

$('.panel-body').scrollTop($('ul > li:nth-child(2)').position().top);

 $('.panel-body').scrollTop($('ul > li:nth-child(2)').position().top);

.panel-body > ul{
    padding:0;
    margin:0;
    text-align:center;
}
.panel-body > ul > li{
  padding:50px 0px;
  background:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body" style="max-height: 300px;overflow-y: scroll;">
      <ul class="list-group" id="ulid">
        <li>Date - 5/12/2017</li>
        <li>Date - 15/12/2017</li>
        <li>Date - 23/12/2017</li>
        <li>Date - 25/12/2017</li>
        <li>Date - 26/12/2017</li>
       </ul>
   </div>