兼容IE，chrome 等所有浏览器 回到顶部代码
生活随笔
收集整理的這篇文章主要介紹了
兼容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 等所有浏览器 回到顶部代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MongoDB Windows环境安装及
- 下一篇： python-print