老师我的回到顶部不兼容IE浏览器,老师看下
来源:1-1 课程介绍
菜鸟00001
2019-05-23 15:52:28
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>back_to_the_top</title>
</head>
<style type="text/css">
.mains{
width:1200px;
margin:0 auto;
}
.mains img{
width:100%;
height:100%;
}
.btn{
display:none;
width:40px;
height:40px;
position:fixed;
left:50%;
bottom:30px;
background:url(img/img_top.jpg) no-repeat left top;
margin-left:600px;
}
.btn:hover{
background:url(img/img_top.jpg) no-repeat left -40px;
}
</style>
<body>
<div class="mains">
<img src="img/juhuasuan_img.png"/>
</div>
<a href="javascript:;" title="回到顶部" id="btn" class="btn"></a>
<script type="text/javascript" src="js/back_top.js"></script>
<!-- <script type="text/javascript">
var btn=document.getElementById('btn');
//存放定时器的变量
var timer=null;
//isTop
var isTop=true;
//获取可视区域高度
var clientHeight=document.documentElement.clientHeight;
alert(clientHeight)
//滚动条滚动时触发
window.onscroll=function(){
//点击的时候获取滚动条高度
var osTop=document.documentElement.scrollTop || document.body.scrollTop;
if(osTop>clientHeight){
btn.style.display='block';
}else{
btn.style.display='none';
}
if(!isTop){
clearInterval(timer);
}
isTop=false;
}
btn.onclick=function(){
timer=setInterval(function(){
//点击的时候获取滚动条高度
var osTop=document.documentElement.scrollTop || document.body.scrollTop;
//滚动条速度值
var isSpeed=Math.floor(-osTop/5);
//滚动条默认值
document.documentElement.scrollTop = document.body.scrollTop = osTop+isSpeed;
isTop=true;
console.log(osTop-isSpeed);
//判断滚动条是否到达顶点
if(osTop==0){
clearInterval(timer);
}
},30);
}
</script> -->
</body>
</html>
//公共变量
var obtn=document.getElementById('btn'),//获取元素
clientHeight=document.documentElement.clientHeight,//获取可视区域高度
timer=null,//定时器
isTop=true;//判断滚动是否滚动
console.log(obtn);
//滚动条事实滚动时方法
window.onscroll=function(){
//回到顶部按钮的显示和隐藏
var osTop=document.documentElement.scrollTop||document.documentElement.scrollTop;//获取滚动条滚动时高度
if(osTop>clientHeight){
obtn.style.display='block';
}else{
obtn.style.display='none';
}
if(!isTop){
clearInterval(timer);
}
isTop=false;
};
obtn.onclick=function(){
alert('')
timer = setInterval(function(){
var osTop=document.documentElement.scrollTop||document.documentElement.scrollTop;//获取滚动条滚动时高度
//滚动条速度
var isSpeed=Math.floor(-osTop/5);
document.documentElement.scrollTop=document.documentElement.scrollTop=osTop+isSpeed;
isTop=true;
if(osTop==0){
clearInterval(timer);
}
},30)
}
1回答
同学你好, 兼容IE浏览器需要使用document.body表示document.documentElement。
建议修改:可以在需要的地方使用或的关系, 实现兼容, 示例:
老师只给出了一个修改的示例, 其他需要修改的地方, 同学自己下去调整哦
如果帮助到了你, 欢迎采纳!
祝学习愉快~~~
相似问题