cách tìm khoảng cách thẳng đứng từ đầu trong px của một phần tử bằng cách sử dụng jQuery

Question

Làm cách nào để tìm khoảng cách thẳng đứng từ đầu trang đến nơi phần tử tồn tại trong DOM bằng javascript/jQuery?

Tôi đã giống như

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

Ví dụ ở đây, tôi muốn tìm khoảng cách thẳng đứng từ trên cùng của trang để các yếu tố li#test.

Tôi đã thử .scrollTop() nhưng giá trị này luôn bằng 0!

Answer 1

Sử dụng .offset() để có được khoảng cách giữa một yếu tố và phía trên cùng của tài liệu:

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

Answer 2

Rob W của câu trả lời là đúng - mà sẽ cung cấp cho bạn những bù đắp từ phía trên cùng của trang đầy đủ.

Nếu bạn muốn để có được bù đắp từ phía trên cùng của màn hình có thể xem được, bạn nên làm điều này:

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

Hy vọng rằng sẽ giúp!

Answer 3

Theo như tôi biết .offset() lấy khoảng cách giữa vị trí cuộn hiện tại và đầu tài liệu.

Bạn cần phải sử dụng này:. $("li.test").position().top

Answer 4

Sử dụng $ (element) .offset() trên và thêm chiều cao của các yếu tố cố định hiện có trên trang với nó để làm cho nó chính xác hơn.