Как найти вертикальное расстояние от вершины в px элемента, используя jQuery

Как найти вертикальное расстояние от верхней части страницы до того, где элемент существует в DOM, используя javascript/jQuery?

У меня что-то вроде

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

Например, здесь я хочу найти вертикальное расстояние от верхней части страницы до элемента li#test.

Я пробовал .scrollTop(), но он всегда приходит как 0!

Ответы

Ответ 1

Используйте .offset(), чтобы получить расстояние между элементом и вершиной документа:

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

Ответ 2

Ответ Rob W правильный - это даст вам смещение от верхней части полной страницы.

Если вы хотите получить смещение от верхней части экрана просмотра, вы должны сделать это:

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

Надеюсь, что это поможет!

Ответ 3

Насколько я знаю, .offset() получить расстояние между текущей полосой прокрутки и верхней частью документа.

Вам нужно использовать это: $("li.test").position().top

Ответ 4

Используйте $(element).offset(). top и добавьте высоту существующих неподвижных элементов на странице, чтобы сделать ее более точной.