desplazamiento al elemento li - jquery

Question

tengo un "ul" que contiene muchos "li" (varios cientos), el ul tiene una altura fija de aproximadamente 400px y el desbordamiento de la propiedad css: desplazamiento, cada li tiene la altura de 40px así que en cada momento dado no hay más de 10 li visibles (el resto debe ser desplazado). ¿cómo puedo cambiar la posición de desplazamiento (usando jquery) del ul a un valor específico de li?

alguna idea?

Answer 1

que tiene que hacer algo como esto:

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

Si quieren animar, hacer

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

Obviamente ajustar 14 para diferentes li s.

Answer 2

Se puede hacer así:

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

es necesario ajustar el valor de eq para li específica o incluso se puede personalizar el selector.

Answer 3

Si alguien necesita una versión JS vainilla, lo siguiente está funcionando bien para mí, el valor de 50 es solo para mostrar todo cuando estoy cerca de la parte superior de la lista. Puedes ajustar eso.

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

yo nos acercamos usando la respuesta de @ lonesomeday, pero me encontré con que tenía para calcular la posición relativa de la específica li desde el primer li porque cambió dependiendo de la posición de desplazamiento actual de la ul que contiene.

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