夏日博客

A-A+

js实现回到顶部按钮程序代码

2016年10月15日 前端设计 暂无评论 阅读 5 views 次

我们经常会看到很多网站会有一个在右下解移动的，点击可直接回到顶部的按钮哦，下面我来介绍利用js实现回到顶部的方法，有需要的朋友可参考。

重要的是全部使用js来实现，不需要在html、css中增加任何内容，甚至都不需要图片，只要引用js即可。而且全面兼容IE6。由于考虑兼容性问题,实现原理是我们获取当前ie高度然后再滚动上来,前主流浏览器除IE外对浏览器标准支持都比较好，例如chrome、firefox以及safari等。对应后者，可以通过window对象的pageYOffset属性来取到当前滚动条到页面顶部的高度。对于万恶的IE来说就比较麻烦一点，它依赖当前文档类型。文档类型分为Standards Mode和Quirks Mode，页面声明了DOCTYPE时为Standards Mode，反之为Quirks Mode。可以使用document.compatMode来获取，该方法也同时支持其他浏览器，其返回值为BackCompat或CSS1Compat，含义如下：

BackCompat Standards-compliant mode is not switched on. (Quirks Mode)

CSS1Compat Standards-compliant mode is switched on. (Standards Mode)由于IE对盒模型的渲染跟文档类型有很大关系，所以获取滚动条高度的方式也是不一样的。当文档类型为Standards Mode，获取方式为：document.documentElement.scrollTop，而Quirks Mode时则为：document.body.scrollTop。

理解上面的所提到的差异后，用代码实现就很容易了，具体实现的代码如下：

  1. function getScrollTop1() {  
  2.     if ('pageYOffset' in window) {  
  3.         return window.pageYOffset;  
  4.     } else if (document.compatMode === "BackCompat") {  
  5.         return document.body.scrollTop;  
  6.     } else { //xiariboke.net  
  7.         return document.documentElement.scrollTop;  
  8.     }  
  9. }  

甚至可以修改上述代码，使用一行代码搞定，但是可读性没有上面好，代码如下：

  1. function getScrollTop() {  
  2.     return !('pageYOffset' in window)  
  3.                 ? (document.compatMode === "BackCompat")  
  4.                 ? document.body.scrollTop  
  5.                 : document.documentElement.scrollTop  
  6.                 : window.pageYOffset;  
  7. }  
  8. //或  
  9. function getScrollTop() {  
  10.     return ('pageYOffset' in window) ? window.pageYOffset  
  11.         : document.compatMode === "BackCompat"  
  12.         && document.body.scrollTop  
  13.         || document.documentElement.scrollTop ;  
  14. }  

另外除了上述document.compatMode的方式来获取文档类型外，还可以使用 document.defaultView来获取。在IE 9以下的Quirks Mode中document不支持defaultView属性,计了这么多来下面来看实现代码,代码如下：

  1. (function() {  
  2.     var btnId = '__gotop';  
  3.     var isIE = !!window.ActiveXObject && /msie (d)/i.test(navigator.userAgent) ? RegExp['$1'] : false;  
  4.     function $() {  
  5.         return document.getElementById(arguments[0]);  
  6.     }  
  7.     function getScrollTop() {  
  8.         return ('pageYOffset' in window) ? window.pageYOffset  
  9.             : document.compatMode === "BackCompat"  
  10.             && document.body.scrollTop  
  11.             || document.documentElement.scrollTop ;  
  12.     }     
  13.     function bindEvent(event, func) {  
  14.         if (window.addEventListener) {  
  15.             window.addEventListener(event, func, false);  
  16.         } else if (window.attachEvent) {  
  17.             window.attachEvent('on' + event, func);  
  18.         }  
  19.     }  
  20.     bindEvent('load',  
  21.         function() {  
  22.             var css = 'background-color:#999;width:50px;height:50px;position:fixed;right:100px;bottom:30px;border-radius:10px;cursor:pointer;display:none;';  
  23.             if (isIE && isIE < 7) {  
  24.                 css += '_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-30-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))';  
  25.                 var style = document.createStyleSheet();  
  26.                 style.cssText = '*html{background-image:url(about:blank);background-attachment:fixed;}';  
  27.             }  
  28.             var html = '<div style="height: 0;width: 0;border:14px solid #999999;border-top: 0 none;border-bottom:14px solid #fff;position: relative;margin:12px 0 0 11px;"><div style="width:8px;height:7px;position:absolute;top:14px;left:-4px;background-color:#fff;overflow: hidden;"></div></div>';  
  29.             var el = document.createElement('DIV');  
  30.             el.id = btnId;  
  31.             el.style.cssText = css;  
  32.             el.innerHTML = html;  
  33.             document.body.appendChild(el);  
  34.             el.onclick = function() {  
  35.                 (function() {  
  36.                     var top = getScrollTop();  
  37.                     if (top > 0) {  
  38.                         window.scrollTo(0, top / 1.2)  
  39.                         setTimeout(arguments.callee, 10);  
  40.                     }  
  41.                 })();  
  42.             };  
  43.             el.onmouseover = function() {  
  44.                 $(btnId).firstChild.style.borderBottom = '14px solid #ddd';  
  45.                 $(btnId).firstChild.firstChild.style.backgroundColor = '#ddd';  
  46.             };  
  47.             el.onmouseout = function() {  
  48.                 $(btnId).firstChild.style.borderBottom = '14px solid #fff';  
  49.                 $(btnId).firstChild.firstChild.style.backgroundColor = '#fff';  
  50.             };  
  51.         }  
  52.     );  
  53.     bindEvent('scroll',  
  54.         function() {  
  55.             var top = getScrollTop(), display = 'none';  
  56.             if (top > 0) {  
  57.                 display = 'block';  
  58.             }  
  59.             if ($(btnId)) $(btnId).style.display = display;  
  60.         });  
  61. })();  
标签：

给我留言