今天在博客园看到一片帖子回到顶部代码，索性就看了下，但是发现在非IE浏览器下可以运行，在IE浏览器下却运行不了。
故将其代码搬弄过来做了些许修改后，完美支持了IE下的运行。
主要实现功能代码文件：
<html>
<head>
<title>兼容IE，chrome 等所有浏览器 回到顶部代码</title>
<style type="text/css">
.fixed {
position: fixed; /*对于火狐等其他浏览器需要设置的*/
bottom: 30px;
right: 30px;
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);" id="btn" class="fixed ie"></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>
注：Event.js 主要是实现对所有浏览器添加事件以及移除事件。
代码如下：
/* * 添加事件处理程序 * @param object object 要添加事件处理程序的元素 * @param string type 事件名称，如click * @param function handler 事件处理程序，可以直接以匿名函数的形式给定，或者给一个已经定义的函数名。匿名函数方式给定的事件处理程序在IE6 IE7 IE8中可以移除，在标准浏览器中无法移除。 * @param boolean remove 是否是移除的事件，本参数是为简化下面的removeEvent函数而写的，对添加事件处理程序不起任何作用 * 描述：一个函数完全代替attachEvent/detachEvent，并且支持所有主流浏览器、解决IE6 IE7 IE8事件绑定导致的先绑定后执行问题。 * 下面是完美兼容addEventListener/removeEventListener和attachEvent/detachEvent的函数，支持Google Chrome/Firefox/Safari/Opera/IE 6 7 8 9 10 11等所有主流浏览器， * 能够完美解决IE6 IE7 IE8 this指向错误，能够纠正IE6 IE7 IE8中事件先绑定后执行的错误。 */ function addEvent(object, type, handler, remove) { if (typeof object != 'object' || typeof handler != 'function') return; try { object[remove ? 'removeEventListener' : 'addEventListener'](type, handler, false); } catch (e) { var xc = '_' + type; object[xc] = object[xc] || []; if (remove) { var l = object[xc].length; for (var i = 0; i < l; i++) { if (object[xc][i].toString() === handler.toString()) object[xc].splice(i, 1); } } else { var l = object[xc].length; var exists = false; for (var i = 0; i < l; i++) { if (object[xc][i].toString() === handler.toString()) exists = true; } if (!exists) object[xc].push(handler); } object['on' + type] = function () { var l = object[xc].length; for (var i = 0; i < l; i++) { object[xc][i].apply(object, arguments); } } } } /* 移除事件处理程序 */ function removeEvent(object, type, handler) { addEvent(object, type, handler, true); }
有什么地方有不妥之处，还望大神们指正，小弟不胜感激。
源码下载地址：https://pan.baidu.com/s/1eR5xD2i