今天在博客园看到一片帖子回到顶部代码,索性就看了下,但是发现在非IE浏览器下可以运行,在IE浏览器下却运行不了。故将其代码搬弄过来做了些许修改后,完美支持了IE下的运行。主要实现功能代码文件:<html><head> <title>兼容IE, ...
今天在博客园看到一片帖子回到顶部代码,索性就看了下,但是发现在非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='/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
(#换成@)。