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

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

阿伊舍999

2016-03-03

源自：回到顶部效果 4-4

关注问题我要回答

664

操作

收起

1 回答

MJY
2016-03-04

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

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>

//页面加载后触发
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;
 }