如何获取元素距离页面顶部的高度
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何获取元素距离页面顶部的高度相关的知识，希望对你有一定的参考价值。
页面元素距离浏览器工作区顶端的距离 = 元素距离文档顶端偏移值 - 网页被卷起来的高度
即：
页面元素距离浏览器工作区顶端的距离 = DOM元素对象.offsetTop -document.documentElement.scrollTop
介绍几个属性：（暂时只测了IE和firefox，实际上工作中用到的最多的是chrome）
网页被卷起来的高度/宽度（即浏览器滚动条滚动后隐藏的页面内容高度）
(javascript) document.documentElement.scrollTop //firefox
(javascript) document.documentElement.scrollLeft //firefox
(javascript) document.body.scrollTop //IE
(javascript) document.body.scrollLeft //IE
(jqurey) $(window).scrollTop()
(jqurey) $(window).scrollLeft()
网页工作区域的高度和宽度
(javascript) document.documentElement.clientHeight// IE firefox
(jqurey) $(window).height()
元素距离文档顶端和左边的偏移值
(javascript) DOM元素对象.offsetTop //IE firefox
(javascript) DOM元素对象.offsetLeft //IE firefox
(jqurey) jq对象.offset().top
(jqurey) jq对象.offset().left
参考技术A offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置document.getElementById("ID名称").offsetTop这是离顶部的距离。
希望对你有帮助，望采纳！本回答被提问者采纳
如何获取div距离浏览器顶部的高度
可以使用offset()方法来获取元素距离浏览器的边距，offset()
方法返回或设置匹配元素相对于文档的偏移（位置）。
工具原料：编辑器、浏览器
1、首先设置一个div然后使用offset()方法来获取其距离浏览器顶部的高度，简单的代码示例如下：
<body style="margin: 0;padding: 0;">
<div style="width: 200px;height: 200px;border: 1px solid red;margin-top:100px;"></div>
<script>
alert($('div').offset().top);
</script>
</body>
2、因为div距离顶部的距离是100像素，所以弹出的应该是100，如下图：
<script>
var oBox = document.getElementById("box");
alert( oBox.offsetTop );
</script>
前提是这个DIV要相对于body定位，才能获取到值本回答被提问者采纳
以上是关于如何获取元素距离页面顶部的高度的主要内容，如果未能解决你的问题，请参考以下文章