comment trouver la distance verticale du haut en px d'un élément à l'aide de jQuery

Question

Comment trouver la distance verticale entre le haut de la page et l'endroit où l'élément existe dans le DOM à l'aide de javascript/jQuery ?

j'ai quelque chose comme

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

Par exemple ici, je veux trouver la distance verticale entre le haut de la page et l'élément li#test

J'ai essayé .scrollTop() mais ça donne toujours 0 !

Answer 1

Utilisez .offset() pour obtenir la distance entre un élément et le haut du document :

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

Answer 2

La réponse de Rob W est correcte - cela vous donnera le décalage par rapport au haut de la page complète.

Si vous souhaitez obtenir le décalage à partir du haut de l'écran visible, vous devez procéder comme suit :

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

J'espère que cela pourra aider!

Answer 3

Pour autant que je sache, .offset() obtient la distance entre la position de défilement actuelle et le haut du document.

Vous devez utiliser ceci : $("li.test").position().top

Answer 4

Utilisez $(element).offset().top et ajoutez la hauteur des éléments fixes existants sur la page pour la rendre plus précise.