主页 / 问题 / 762029
Accepted
Владимир
Asked:2020-12-22 23:44:43 +0800 CST2020-12-22 23:44:43 +0800 CST

滚动到 Jquery 块内的元素

  • 772

如何在 div 内准确滚动，而不是在整个页面上滚动？

$(function(){
  $(document).on("keyup", ".search", function(){
        var search_text = $(this).val();
        $("html:not(:animated),body:not(:animated)").animate({
  scrollTop: $('.videos a:contains("'+search_text+'")').offset().top
}, 1000);
    })
})
.videos{
  max-height: 100px;
  overflow-y: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="search">
<ul class="videos">
  <li><a href="#">Видео 1</a></li>
  <li><a href="#">Видео 2</a></li>
  <li><a href="#">Видео 3</a></li>
  <li><a href="#">Видео 4</a></li>
  <li><a href="#">Видео 5</a></li>
  <li><a href="#">Видео 6</a></li>
  <li><a href="#">Видео 7</a></li>
  <li><a href="#">Видео 8</a></li>
  <li><a href="#">Видео 9</a></li>
  <li><a href="#">Видео 10</a></li>
</ul>

jquery

1 个回答

  1. Best Answer

    块本身应该是动画的，而不是html, body：

    $(document).on("keyup", ".search", function(){
  var search_text = $(this).val();
  
  $('.videos a').each(function(){
        
    var $this = $(this);
    if($this.text() === search_text) {
      $(".videos").animate({ scrollTop: $this.offset().top }, 1000);
    } else {
      //$(".videos").animate({ scrollTop: 0 }, 1000);
    }
  });
  
  
});
    .videos{
  max-height: 100px;
  overflow-y: auto;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="search">
<ul class="videos">
  <li><a href="#">Видео 1</a></li>
  <li><a href="#">Видео 2</a></li>
  <li><a href="#">Видео 3</a></li>
  <li><a href="#">Видео 4</a></li>
  <li><a href="#">Видео 5</a></li>
  <li><a href="#">Видео 6</a></li>
  <li><a href="#">Видео 7</a></li>
  <li><a href="#">Видео 8</a></li>
  <li><a href="#">Видео 9</a></li>
  <li><a href="#">Видео 10</a></li>
</ul>

    • 4

相关问题