兼容IE，chrome 等所有浏览器回到顶部代码

今天在博客园看到一片帖子回到顶部代码，索性就看了下，但是发现在非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);" 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>

View Code

注：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);
}

View Code

有什么地方有不妥之处，还望大神们指正，小弟不胜感激。

源码下载地址：https://pan.baidu.com/s/1eR5xD2i

posted on 2016-08-04 15:59 ￡冷☆月№ 阅读(921) 评论(0) 收藏举报