how to find the vertical distance from top in px of an element using jQuery

How do I find the vertical distance from the top of the page to where the element exist in the DOM using javascript/jQuery?

I've something like

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

For example here, I want to find the vertical distance from top of the page to the li#test element.

I tried .scrollTop() but it always comes as 0!

Use .offset() to get the distance between an element and the top of the document:

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

Rob W's answer is correct - that will give you the offset from the top of the full page.

If you want to get the offset from the top of the viewable screen, you should do this:

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

Hope that helps!

As far as i know .offset() get the distance between the current scroll position and the top of the document.

You need to use this: $("li.test").position().top