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

注：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

兼容IE，chrome 等所有浏览器 回到顶部代码的更多相关文章

  1. Jquery判断离开页面时，通过Ajax更新数据（兼容IE,Chrome，FF浏览器）

    现在很多项目都有客户离开网页时,处理一些业务的需求.所以焦点就聚集在了如何获取页面离开事件. 以下是本人在一个项目中需要记录页面浏览时长的处理办法,测试兼容IE,Chrome,FF浏览器 代码如下: ...

  2. listView从底部回到顶部代码实现

    可用如下方法: 1.平滑的回到顶部,但是会划过中间的每一页 mListView.getRefreshableView().smoothScrollToPosition(0); 2.直接跳到顶部 if ...

  3. JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)

    现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...

  4. JS实现复制到剪贴板(兼容FF/Chrome/Safari所有浏览器)

    现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...

  5. JS回到顶部代码小记

    HTML: <div id="goTop"> <a href="#top"><img src="~/Content/th ...

  6. jquery方法回到顶部代码

    <style> /*默认样式,主要是position:fixed实现屏幕绝对定位*/ #gotoTop{display:none;position:fixed;top:75%;left:5 ...

  7. JS--回到顶部代码

    原文地址:http://www.cnblogs.com/liguiqiang1986/articles/3132023.html JS--回到顶部代码 <!DOCTYPE html PUBLIC ...

  8. dom 回到顶部(兼容IE FF Chrome)

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. IE内嵌google chrome frame解决浏览器兼容问题

    IE内嵌google chrome frame解决浏览器兼容问题  http://www.cnblogs.com/xwdreamer/archive/2013/12/17/3477776.html 参 ...

随机推荐

  1. 通达OA 公共文件柜二次开发添加管理信息（图文）

    公共文件柜当内容较多时,管理起来非常easy乱,特别是当有多个名字相近的目录时.这里通过简单的开发添加了两个管理信息,能够通过添加备注的方式加以区分. watermark/2/text/aHR0cDo ...

  2. 使用NIO提升性能

    NIO是New I/O的简称,与旧式的基于流的I/O方法相对,从名字看,它表示新的一套Java I/O标准. 具有以下特性: 传统Java IO,它是阻塞的,低效的.那么Java NIO和传统Java ...

  3. 代码片段--Makefile之大型工程项目子目录Makefile的一种通用写法

    转载:http://blog.csdn.net/mo_hui123456/article/details/8929615 管理Linux环境下的C/C++大型项目,如果有一个智能的Build Syst ...

  4. 浅析SQL Server 2005中的主动式通知机制

    一.引言 在开发多人同时访问的Web应用程序(其实不只这类程序)时,开发人员往往会在缓存策略的设计上狠下功夫.这是因为,如果将这种环境下不常变更的数据临时存放在应用程序服务器或是用户机器上的话,可以避 ...

  5. Keywords Search

    Keywords Search Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  6. 1.4.10 Schemaless模式

    Schemaless模式 schemaless模式是一组solr功能的集合,允许用户通过简单的索引例子数据快速构建一个有效的schema,而不需要手动的编辑schema.这些solr功能都是在solr ...

  7. 2dx关于js响应layer触摸消息的bug

    cocos2dx关于js响应layer触摸消息的bug cocos2d-x 3.7 问题描述: 目前这个版本中(3.7),c++层的layer触摸消息只能通过消息的方式发送给js,不能像lua一样直接 ...

  8. NODE编程（四）--构建Node Web程序2

    四.提供静态文件服务 1.创建一个静态文件服务器 __dirname ,取值是该文件所在咋目录路径.分散在不同目录中的文件可以有不同的值. /** * 最进本的ReadStream静态文件服务器 */ ...

  9. 【MYSQL】常用命令备忘录

    source 不接路径时,查找文件的路径是执行mysql命令时的路径 接路径时,使用路径+filename [root@wordpressserver mysql]# vi demo.mysql [r ...

  10. angularJs中将字符串转换为HTML格式

    首先定义一个filter: .filter( 'to_trusted', ['$sce', function ($sce) { return function (text) { return $sce ...