scrolling to li element - jquery

Question

ho un "ul" che contiene un sacco di "li" (diverse centinaia), l'ul ha un altezza fissa di circa 400px e l'overflow della proprietà css: scroll, ogni li ha l'altezza di 40px così in ogni dato momento non ci sono più di 10 li visibili (il resto deve essere fatto scorrere verso). come posso cambiare la posizione di scorrimento (usando jquery) dell'ul su un li specifico?

qualche pensiero?

Answer 1

Hai bisogno di fare qualcosa di simile:

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

Se si desidera animare esso,

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

Ovviamente regolare 14 per i diversi li s.

Answer 2

Si può fare in questo modo:

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

È necessario regolare il valore per eq per specifici li o si può anche personalizzare il selettore.

Answer 3

Se qualcuno ha bisogno di una versione di JS vaniglia, il seguente sta funzionando bene per me, il valore di 50 è solo così che sto mostrando l'intero articolo quando sono vicino alla cima della lista. Puoi regolarlo.

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

Answer 4

mi sono avvicinato con la risposta di @ lonesomeday, ma ho scoperto che avevo per calcolare la posizione relativa della specifica li dal primo li perché ha cambiato a seconda della posizione di scorrimento corrente del contenente ul.

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