如何使用jQuery找到元素顶部的垂直距离（以px为单位）答案

【问题标题】：how to find the vertical distance from top in px of an element using jQuery如何使用jQuery找到元素顶部的垂直距离（以px为单位）
【发布时间】：2015-09-02 17:06:45
【问题描述】：

如何使用 javascript/jQuery 找到从页面顶部到 DOM 中元素所在位置的垂直距离？

我有类似的东西

<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！

【问题讨论】：

这是您要找的吗？ var position = $('li#test').position();警报（位置。顶部）；

标签： javascript jquery

【解决方案1】：

使用.offset() 获取元素到文档顶部的距离：

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

【讨论】：

【解决方案2】：

Rob W 的回答是正确的 - 这将为您提供与整页顶部的偏移量。

如果你想从可视屏幕的顶部得到偏移量，你应该这样做：

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

希望有帮助！

【讨论】：

哈哈谢谢。 SO 在 Google 搜索中一直很受欢迎，我很无聊，想回答一些问题。在等待 SO 的姊妹站点 ServerFault 上的答案时，我主要在这里闲逛。我是一名资深程序员和新手管理员。 :)
如果您要控制位置，这是一段极好的代码：固定元素！
出色的解决方案。像魅力一样工作。

【解决方案3】：

据我所知.offset() 获取当前滚动位置与文档顶部之间的距离。

你需要使用这个：$("li.test").position().top

【讨论】：

相对于offsetParent，可能不是父div

【解决方案4】：

使用 $(element).offset().top 并将页面上现有固定元素的高度添加到它以使其更准确。

【讨论】：