Blättern zum li-Element - jquery

Question

Ich habe eine "ul", die viele "li" (mehrere hundert) enthält, die ul hat eine feste Höhe von etwa 400px und die css-Eigenschaft overflow:scroll, jede li hat die Höhe von 40px so in jedem gegebenen Moment gibt es nicht mehr als 10 sichtbare li (der Rest müssen gescrollt werden). wie kann ich die Scroll-Position (mit Jquery) der ul zu einem bestimmten li ändern?

irgendwelche Gedanken?

Answer 1

Sie müssen etwa so vorgehen:

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

Wenn Sie es animieren wollen, tun Sie

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

Offensichtlich anpassen 14 für verschiedene li s.

Answer 2

Mit der Antwort von @lonesomeday kam ich der Sache schon näher, aber ich musste die relative Position der spezifischen li vom ersten li weil sie sich je nach der aktuellen Bildlaufposition der enthaltenen ul .

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

Answer 3

Das können Sie so machen:

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

Sie müssen den Wert auf eq für bestimmte li oder Sie können den Selektor sogar individuell anpassen.

Answer 4

Wenn jemand eine Vanilla-JS-Version benötigt, funktioniert die folgende gut für mich, der Wert von 50 ist nur so, dass ich das ganze Element zeigen, wenn ich in der Nähe der Spitze der Liste bin. Sie können das anpassen.

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);
};