你的位置:首页 > 网页设计

[网页设计]兼容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" ></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