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

78

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

Tengo algo 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 hasta el li#testelemento.

¡Lo intenté .scrollTop()pero siempre sale como 0!

javascript jquery

— ptamzz
fuente

1

¿Es esto lo que estás buscando? var position = $ ('li # test'). position (); alerta (posición.top);

— Jonas m

165

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

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

— Rob W
fuente

104

La respuesta de Rob W es correcta, eso le dará el desplazamiento desde la parte superior de la página completa.

Si desea obtener el desplazamiento desde la parte superior de la pantalla visible, debe hacer esto:

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

¡Espero que ayude!

— el factor X
fuente

2

Jaja gracias. SO siempre ha sido un éxito útil en las búsquedas de Google, y estaba aburrido y pensé que respondería algunas preguntas. La mayoría de las veces estoy dando vueltas por aquí mientras espero una respuesta en el sitio hermano de SO, ServerFault. Soy un programador desde hace mucho tiempo y un administrador novato. :)

— thexfactor

1

Este es un excelente fragmento de código si está controlando la posición: ¡elementos fijos!

— Starkers

3

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

Necesitas usar esto: $("li.test").position().top

— Crisan Raluca Teodora
fuente

relativo al offsetParent, que puede no ser el div padre

— aaron

0

Use $ (element) .offset (). Top y agregue la altura de los elementos fijos existentes en la página para que sea más precisa.

— rut shah
fuente