                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /HTML/CSS
                        
                        /回到頂部效果

IE6~8按鈕要按兩次才會(huì)回到頂部

IE6到8有bug,按鈕要按兩次，不到為啥？誰(shuí)在IE上試了？

阿伊舍999

2016-03-03

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

關(guān)注問(wèn)題我要回答

621

操作

收起

1 回答

MJY
2016-03-04

或許你自己寫(xiě)的代碼有疏漏，可以參考下面的代碼

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

//頁(yè)面加載后觸發(fā)
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()?{?
		//設(shè)置定時(shí)器
		timer?=?setInterval(function(){
			//獲取滾動(dòng)條距離頂部的高度
			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;
?}