兼容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 () {//获取滚动条到顶部的距离//我们需要兼容一些浏览器的写法 所以需要使用||兼容chromevar osTop = document.documentElement.scrollTop || document.body.scrollTop;//返回一个整数var speed = Math.floor(-osTop / 5);//滚动事件isTop = true;//设置滚动条到顶部的距离//我们需要兼容一些浏览器的写法 所以需要使用||兼容chromedocument.documentElement.scrollTop = document.body.scrollTop = osTop + speed;//这里必须设置为真 如果为假 在触发滚动事件的时候 就会关闭定时器if (osTop <= 0) {clearInterval(timer);}}, 50);});//滚动时发生的事件window.onscroll = document.onscroll = function () {//获取滚动条到顶部的距离//我们需要兼容一些浏览器的写法 所以需要使用||兼容chromevar 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

转载于:https://www.cnblogs.com/wsk198726/p/5737057.html

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

js浏览器回到顶部方法_基于JS实现回到页面顶部的五种写法(从实现到增强)
写法 [1]锚点使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [ ...
php中页面平滑回到顶部代码,原生JS实现平滑回到顶部组件_javascript技巧
返回顶部组件是一种极其常见的网页功能,需求简单:页面滚动一定距离后,显示返回顶部的按钮,点击该按钮可以将滚动条滚回至页面开始的位置. 实现思路也很容易,只要改变document.documentEle ...
php中页面平滑回到顶部代码,原生JS实现平滑回到顶部组件
返回顶部组件是一种极其常见的网页功能,需求简单:页面滚动一定距离后,显示返回顶部的按钮,点击该按钮可以将滚动条滚回至页面开始的位置. 实现思路也很容易,只要改变document.documentEle ...
复制链接到safari浏览器打开_JS实现复制到剪贴板(兼容FF/Chrome/Safari所有浏览器)...
现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...
js浏览器回到顶部方法_js 返回顶部按钮
要求:当鼠标从顶部滚动后,显示返回顶部按钮,点击按钮,页面平滑滚动到顶部,按钮隐藏. 1.css #scrollTop{position:fixed;bottom:20px;right:20px;he ...
html锚点链接回到顶部,回到顶部和回到底部特效-jquery锚点移动兼容所有浏览器...
插件描述:回到顶部和回到底部特效-jquery锚点移动兼容所有浏览器回到顶部和回到底部在当前的网页中应用时相当广泛的为了更好的体验,我们在回到顶部或回到底部的过程中采用一个渐进的滚动那么我们就要 ...
超好用的移动端布局自适应大小rem判断js文件及超过一定高度回到顶部按钮代码...
//以下代码放到一个adapt.js文件当中 (function (doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientatio ...
IE内嵌google chrome frame解决浏览器兼容问题
IE内嵌google chrome frame解决浏览器兼容问题参考文章: (1)IE内嵌google chrome frame解决浏览器兼容问题 (2)https://www.cnblogs.co ...
浏览器刷新页面后回到顶部_JavaScript仿知乎回到顶部功能
一般的网站都有个回到顶部,回到顶部又有多种方法可以实现, 方法1: 在css中添加 html {scroll-behavior: smooth; } 然后在回到顶部按钮上加一个a标签,herf属性写顶 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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