IE6~8按钮要按两次才会回到顶部
IE6到8有bug,按钮要按两次,不到为啥?谁在IE上试了?
IE6到8有bug,按钮要按两次,不到为啥?谁在IE上试了?
2016-03-03
或许你自己写的代码有疏漏,可以参考下面的代码
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; }
举报