今天在博客园看到一片帖子回到顶部代码，索性就看了下，但是发现在非IE浏览器下可以运行，在IE浏览器下却运行不了。
故将其代码搬弄过来做了些许修改后，完美支持了IE下的运行。
主要实现功能代码文件：
<html>
<head>
<title>兼容IE，chrome 等所有浏览器 回到顶部代码</title>
<style type="text/css">
.fixed {
position: fixed; /*对于火狐等其他浏览器需要设置的*/
bottom: 30px;
right: 30px;
width: 40px;
height: 40px;
cursor: pointer;
display: none;
background: url(images/top_bg.png) no-repeat left top;
}
.ie {
_position: absolute;
_clear: both;
_top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) - 30 : document.body.scrollTop +(document.body.clientHeight-this.clientHeight) - 30);
}
#btn:hover {
background: url(images/top_bg.png) no-repeat left -40px;
}
</style>
<script type="text/javascript" src="js/Event.js"></script>
</head>
<body>
<a href="javascript:void(0);" ></a>
<script type="text/javascript">
var isTop = true;
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
var btnBack = document.getElementById('btn');
//添加点击事件
addEvent(btnBack, 'click', function () {
var timer = setInterval(function () {
//获取滚动条到顶部的距离
//我们需要兼容一些浏览器的写法 所以需要使用||兼容chrome
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
//返回一个整数
var speed = Math.floor(-osTop / 5);
//滚动事件
isTop = true;
//设置滚动条到顶部的距离
//我们需要兼容一些浏览器的写法 所以需要使用||兼容chrome
document.documentElement.scrollTop = document.body.scrollTop = osTop + speed;
//这里必须设置为真 如果为假 在触发滚动事件的时候 就会关闭定时器
if (osTop <= 0) {
clearInterval(timer);
}
}, 50);
});
//滚动时发生的事件
window.onscroll = document.onscroll = function () {
//获取滚动条到顶部的距离
//我们需要兼容一些浏览器的写法 所以需要使用||兼容chrome
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
//滚动到第二屏的时候 会出现回到顶部的按钮
if (osTop > clientHeight) {
btnBack.style.display = "block";
}
else {
btnBack.style.display = "none";
}
if (!isTop) {
clearInterval();
}
isTop = false;
}
</script>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>