你的位置:首页 > 软件开发 > 网页设计 > 兼容IE,chrome 等所有浏览器 回到顶部代码

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

发布时间:2016-08-04 17:00:20
今天在博客园看到一片帖子回到顶部代码,索性就看了下,但是发现在非IE浏览器下可以运行,在IE浏览器下却运行不了。故将其代码搬弄过来做了些许修改后,完美支持了IE下的运行。主要实现功能代码文件:<html><head> <title>兼容IE, ...

今天在博客园看到一片帖子回到顶部代码,索性就看了下,但是发现在非IE浏览器下可以运行,在IE浏览器下却运行不了。

故将其代码搬弄过来做了些许修改后,完美支持了IE下的运行。

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

主要实现功能代码文件:

兼容IE,chrome 等所有浏览器 回到顶部代码兼容IE,chrome 等所有浏览器 回到顶部代码
<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='/images/loading.gif' data-original="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>

原标题:兼容IE,chrome 等所有浏览器 回到顶部代码

关键词:chrome

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录