版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/CNZSWYMP/article/details/69360534
问题:idea环境下使用document.body.scrollTop对象无法实现。
解决方案:将document.body.scrollTop替换为document.documentElement.scrollTop。
原因:有<!DOCTYPE..>标签时使用document.documentElement。
没有<!DOCTYPE..>标签时,使用document.body。
IE5.5之后不支持document.body.scrollX对象
最后附上返回底部功能实现的源码
html代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="app.js"></script>
</head>
<body>
<div class="box">
<img src="阿离.jpg" height="4000px"><br/>
</div>
<a href="javascript:;" class="btn" title="回到顶端" id="btn"></a>
</body>
</html>
JS:
window.onload = function () {
var topbtn = document.getElementById("btn");
var timer = null;
var pagelookheight = document.documentElement.clientHeight;
window.onscroll = function(){
// alert("hello");
var backtop = document.documentElement.scrollTop;
if(backtop >= pagelookheight){
topbtn.style.display = "block";
}else{
topbtn.style.display = "none";
}
}
topbtn.onclick = function () {
// alert("Hello")
timer = setInterval(function () {
var backtop = document.documentElement.scrollTop;
var speedtop = backtop/5;
document.documentElement.scrollTop = backtop -speedtop;
if(backtop ==0){
clearInterval(timer);
}
}, 30);
}
}
*{
margin: 0;
padding: 0;
}
.box{
width: 1000px;
margin: 0 auto;
}
.btn{
width: 40px;
height: 80px;
position: fixed;
bottom: 30px;
background: red;
left: 50%;
margin-left: 500px;
}
.btn:hover{
background: green;
}