cómo encontrar la distancia vertical desde arriba en px de un elemento usando jQuery

Question

¿Cómo encuentro la distancia vertical desde la parte superior de la página hasta donde el elemento existe en el DOM usando javascript/jQuery?

He algo así como

<ul> 
    <li>one</li> 
    <li>one</li> 
    <li>one</li> 
    <li>one</li> 
    <li class="test">one</li> 
    .... 
    .... 
    .... 
    <li>one</li> 
</ul> 

Por ejemplo aquí, quiero encontrar la distancia vertical desde la parte superior de la página para el elemento li#test.

Probé .scrollTop() pero siempre viene como 0!

Answer 1

Uso .offset() para obtener la distancia entre un elemento y la parte superior del documento: Respuesta

$("li.test").offset().top 

Answer 2

de Rob W es correcto - que le dará el desplazamiento desde la parte superior de la página completa.

Si usted desea conseguir el desplazamiento de la parte superior de la pantalla visible, usted debe hacer esto:

var viewableOffset = $("#li.test").offset().top - $(window).scrollTop(); 

Espero que ayude!

Answer 3

Por lo que sé .offset() obtener la distancia entre la posición de desplazamiento actual y la parte superior del documento.

Es necesario utilizar la siguiente:. $("li.test").position().top

Answer 4

Uso $ (elemento) .offset() superior y añadir altura de los elementos fijos existentes en la página para que para que sea más precisa.