scrollTop прыгает при вызове несколько раз на одном и том же элементе

Question

Я использую функцию scrollTop jquery и не могу понять, почему он перескакивает, когда вы вызываете его несколько раз на одном и том же элементе.

Я собрал это example, чтобы проиллюстрировать проблему. Когда нажата кнопка тестирования, она чередуется между прокруткой к указанному элементу и другим местоположением в списке.

$('#button').click(function() { 
 
$('.items').scrollTop($('li.8').offset().top); // scroll to item 8 
 
});

.items{ 
 
    max-height: 80px; 
 
    overflow: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="items large-8 columns end"> 
 
<ul class="list"> 
 
<li class="0">Almy, Joannie </li><li class="1">Auclair, Donnette </li><li class="2">Auerbach, Trinh </li><li class="3">Bement, Margeret </li><li class="4">Bryan, Willian </li><li class="5">Bullen, Tempie </li><li class="6">Coppa, Ozella </li><li class="7">Dahlin, Clementina</li><li class="8">Dahlman, Sasha </li><li class="9">Dorfman, Josef </li><li class="10">Heckert, Whitney </li><li class="11">Hendershott, Lida </li><li class="12">Holmes, Ellsworth </li><li class="13">Jaffee, Karlyn </li><li class="14">Joslyn, Nora </li><li class="15">Kiley, Patrica </li><li class="16">Lakes, Mickie </li><li class="17">Leiker, Enola</li><li class="18">Lemaire, Shanel, </li><li class="19">Lingerfelt, Graham </li><li class="20">Mangum, Maile </li><li class="21">Marcinkowski, Monica </li><li class="22">Mcraney, Allyson </li><li class="23">Meyerson, Lura </li><li class="24">Mole, Eboni </li><li class="25">Paulsen, Merrie </li><li class="26">Preble, Rivka </li><li class="27">Privette, Vonnie </li><li class="28">Quinones, Tilda </li><li class="29">Rojo, Eloy </li><li class="30">Semple, Dwana </li><li class="31">Sifuentes, Tyron </li><li class="32">Sloat, Dante </li><li class="33">Slocum, Shanna </li><li class="34">Sly, Ellamae </li><li class="35">Stolp, Courtney </li><li class="36">Till, Lucien </li><li class="37">Ulman, Jennifer </li><li class="38">Wadlow, Cassandra </li><li class="39">Zellars, Marty </li> 
 
</ul> 
 
</div> 
 
<button id="button">test</button>

Answer 1

Это происходит потому, что элемент, который вы получаете свойство смещения и смещения возвращает позицию элемента относительно документа, что означает, когда вы перечисляете на вашем UL литиево с 8 класса офсет изменения и на этом случае вы должны использовать положение:

$('#button').click(function() { 
$('.items').scrollTop($('li.8').position().top); // scroll to item 8 
}); 

для того, чтобы заставить его работать должным образом родитель должен иметь позицию относительно, вы можете проверить эту скрипку: http://jsfiddle.net/wgqoh1b3/28/

Answer 2

Для того, чтобы это остановить прыжки, вы можете попробовать следующий код:

$('#button').click(function() { 
    $('.items').scrollTop(0); 
    $('.items').scrollTop($("li.8").position().top); 
});