Прокрутка до элемента внутри блока Jquery

313

25 декабря 2017, 12:23

Как сделать прокрутку именно внутри дива, а не по всей странице?

$(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>

Answer 1

Сам блок анимировать стоит, а не 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>