可以使用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像素，所以d出的应该是100，如下图：
实现原理：当页面加载的时候，把元素定位到页面的右下角，当页面滚动时，元素一直位于右下角，当用户点击的时候，页面回到顶部。
要点一：documentdocumentElementclientWidth || documentbodyclientWidth； 获得可视区的宽度。后面是兼容chrome，前面是兼容其它浏览器。
要点二：oTopstyleleft = screenw - oTopoffsetWidth +"px"; 当页面加载时，让元素的位置位于页面最右边，用可视区的宽度减去元素本身的宽度。
要点三：oTopstyletop = screenh - oTopoffsetHeight + scrolltop +"px"; 当页面滚动时，元素的Y坐标位置等于可视区的高度减去元素本身的高度，加上滚动距离。
要点四：documentdocumentElementscrollTop = documentbodyscrollTop =0; 当点击元素时，让页面的滚动距离为0写两个是为了兼容。
参考：>
if(documentdocumentElement&&documentdocumentElementscrollTop)
{
scrollTop=documentdocumentElementscrollTop;
}
else if(documentbody)
{
scrollTop=documentbodyscrollTop;
}
if(scrollTop>50)
{
documentgetElementById('obj')styleopacity='0';
}
你要使用添加一个“回到顶部”按钮那你就得把页面分割，保证你添加的按钮不随滚动条滚动，例如把“回到顶部”按钮放到第一行，假设你从第二行进行分割，然后添加代码:
Private Sub CommandButton1_Click()
range("A2")select '如果你从第三行分割就把A2改成A3
End Sub
如果你没有分割建议你使用录制宏，添加个快捷键，然后把录制好的宏里边的代码替换成
activesheetrange("A1")select
即使分割了用这种办法我觉得也比较方便，只要把A1替换成分割行的第一行就行，设置快捷键多方便啊，又不影响画面。
function m_over(id){
var tt=idoffsetTop;
while(i = idoffsetParent){//=在JAVA里是赋值符号哪，判断用==的，JS语法和JAVA相似吧，呵呵
tt+=ioffsetTop;
}
alert(tt);
}
<div class="menu" onmouseover="m_over(this)"><a href="#">首页</a></div>
我不懂JS，但我觉得这样改下，也许就正常了：
function m_over(id){
var tt=idoffsetTop;
while(i == idoffsetParent){
tt+=ioffsetTop;
}
alert(tt);
}
<div class="menu" onmouseover="m_over(this)"><a href="#">首页</a></div>
//html
<body>
<div style="background:#003366;height:500px;">空div</div>
<div class="purple" style="height:500px;width:200px;background:purple">
<div class="nb" style="height:100px;width:100px;background:#9966FF">移动到顶部固定不变</div>
</div>
<div class="red" style="background:#ff0000;height:1500px;">空div</div>
<div style="background:#ccc;height:1500px;">空div</div>
<div class="nb2" style="height:100px;width:100px;background:gray;">移动到底部固定不变</div>
</body>
//js
$(function(){
//获取要定位元素距离浏览器顶部的距离
var navH = $("nb")offset()top;
var navH2 = $("nb2")offset()top;
var Pur= $("purple")offset()top; //紫色块
var Red= $("red")offset()top; //红色块
//滚动条事件
$(window)scroll(function(){
//获取滚动条的滑动距离
var scroH = $(this)scrollTop();
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
if(scroH>=navH){
$("nb")css({"position":"fixed","top":0});
}else if(scroH<navH){
$("nb")css({"position":"static"});
}
if(scroH <= navH2){
$("nb2")css({"position":"fixed","bottom":"15px","right":"15px"});
}else if(scroH<navH){
$("nb2")css({"position":"static"});
}
if(scroH >= Pur && scroH <= Red){
$("nb")css({"position":"static"}); //在紫色块的时候不固定
$("nb2")css({"position":"static"}); //在紫色块的时候不固定
}
})
})
可以使用offset() 方法，该方法返回或设置匹配元素相对于文档的偏移（位置），该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
1、使用offset() 方法获取一个元素距离浏览器的顶部和左边的可视距离，代码如下：
<html><head>
<script type="text/javascript" src="/jquery/jqueryjs"></script>
<script type="text/javascript">
$(document)ready(function(){
$("button")click(function(){
x=$("p")offset();
$("#span1")text(xleft);
$("#span2")text(xtop);
});
});
</script>
</head>
<body>
<p>本段落的偏移是 <span id="span1">unknown</span> left 和 <span id="span2">unknown</span> top。</p>
<button>获得 offset</button>
</body>
</html>
2、运行的结果如下：
以上就是关于如何获取div距离浏览器顶部的高度，宽度，内容全部的内容，包括:如何获取div距离浏览器顶部的高度，宽度，内容、怎样用js写返回顶部的滑动效果、js获取滚动条距离浏览器顶部高度高度，改变导航css等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）