老师在Chrome浏览器中按照您的代码会导致document.body.scrollTop的console值为0;
查了资料发现是DTD的问题。
页面指定了DTD,即指定了DOCTYPE时,使用document.documentElement.scrollTop。
页面没有DTD,即没指定DOCTYPE时,使用document.body.scrollTop。
后来又查了查 才知道原来ie狐火都是documentElement, 只有谷歌的是body 但是后来谷歌也改了
所以这么写
document.body.scrollTop + document.documentElement.scrollTop;
(以上均是从CSDN查询得出,下面是代码块)<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>根据页面滚动位置显示浮动框</title>
<style type="text/css">
body{
height: 2222px;
}
#toTop{
position: fixed;
bottom: 100px;
left: 0;
display: none;
}
</style>
</head>
<body>
<h1>我是页面顶端</h1>
<div id="toTop">
<a href="#">返回顶部</a>
</div>
<script>
var toTop=document.getElementById("toTop");
window.onscroll=function () {
//获得鼠标移动距离坐标
console.log(document.body.scrollTop + document.documentElement.scrollTop);
//当页面滚动距离超过500触发,滚动距离可参考上方注释内容
if (document.body.scrollTop + document.documentElement.scrollTop>500)
{toTop.style.display="block";}
else
{toTop.style.display="none";}
};
</script>
</body>
</html>
|