为了账号安全,请及时绑定邮箱和手机立即绑定

IE6~8按钮要按两次才会回到顶部

IE6到8有bug,按钮要按两次,不到为啥?谁在IE上试了?

正在回答

1 回答

或许你自己写的代码有疏漏,可以参考下面的代码

html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>回到顶部</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div>
<img src="background.jpg" />
</div>
<a href="javascript:;" id="btn" title="回到顶部" ></a>
</body>
</html>

js

//页面加载后触发
window.onload = function () {
	var obtn = document.getElementById('btn');
	var timer = null;
	var isTop =true;
	var clientHeight = document.documentElement.clientHeight;
	window.onscroll = function() {
		var osTop = document.documentElement.scrollTop || document.body.scrollTop;

		if(clientHeight > osTop){
				obtn.style.display = 'none';
			}else{
				obtn.style.display = 'block';
			}
		if(!isTop){
			clearInterval(timer);
		}
		isTop = false;
	}

	obtn.onclick = function() { 
		//设置定时器
		timer = setInterval(function(){
			//获取滚动条距离顶部的高度
			var osTop = document.documentElement.scrollTop || document.body.scrollTop;
			var ispeed = Math.floor(-osTop / 5);
			document.documentElement.scrollTop  = document.body.scrollTop = osTop + ispeed;
			console.log('osTop - ispeed')
			

			isTop = true;
			if(osTop == 0){
				clearInterval(timer);
			}
			}, 30);

		
	}
}

css

.box{
	width: 1190px;
	margin:0 auto;
}

#btn{
	width: 40px;
	height: 40px;
	position: fixed;
	left: 45%;
	display:none;
	margin-left: 600px;
	bottom: 30px;
	background: url(btn.jpg) no-repeat left top ;
	
}
 #btn:hover{
 	background: url(btn.jpg) no-repeat 0 -39px;
 }


0 回复 有任何疑惑可以回复我~
#1

阿伊舍999 提问者

我对比了下写的一样,那可能是我那个IE的问题吧
2016-03-05 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
回到顶部效果
  • 参与学习       44211    人
  • 解答问题       206    个

回到顶部网站不可缺少的一部分,用JS实现炫酷拉风的回到顶部效果

进入课程

IE6~8按钮要按两次才会回到顶部

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信