Прокрутка к элементу li - jquery

У меня есть "ul", который содержит много "li" (несколько сотен), ul имеет фиксированную высоту около 400px и переполнение свойства css: прокрутка, каждая li имеет высоту 40 пикселей, поэтому в каждый данный момент не более 10 видимых ли (остальные нужно прокрутить). как я могу изменить положение прокрутки (используя jquery) ul в конкретный ли?

любые мысли?

Ответ 1

Вам нужно сделать что-то вроде этого:

$('#yourUL').scrollTop($('#yourUL li:nth-child(14)').position().top);

Если вы хотите анимировать его, сделайте

$('#yourUL').animate({
     scrollTop: $('#yourUL li:nth-child(14)').position().top
}, 'slow');

Очевидно, настройте 14 для разных li s.

Ответ 2

Я получил близко, используя @lonesomeday ответ, но я обнаружил, что мне нужно было рассчитать относительное положение конкретного li от первого li, потому что оно изменилось в зависимости от текущей позиции прокрутки содержащего ul.

$('#yourUL').scrollTop($('#yourUL li:nth-child(14)').position().top - $('#yourUL li:first').position().top)

Ответ 3

Вы можете сделать следующее:

$('html, body').animate({
     scrollTop:$('#ulID li:eq(1)').offset().top
}, 1000);

Вам нужно настроить значение eq для конкретного li или вы даже можете настроить селектор.

Ответ 4

Если кому-то нужна версия ванильной версии JS, для меня хорошо работает следующее: значение 50 - это только то, что я показываю весь элемент, когда я приближаюсь к вершине списка. Вы можете настроить это.

function updateListSelection(liID) {

    var list = document.getElementById("id Tag Of The <UL> element"),
        targetLi = document.getElementById(liID); // id tag of the <li> element

    list.scrollTop = (targetLi.offsetTop - 50);
};