svip

我们在做网站的时间，经常会遇到返回顶部的效果，鼠标滚动一定高度之后，会出现“返回顶部”的标签。“返回顶部”标签被固定到窗口的指定位置，位置始终不变。当滚动的距离高度小于指定高度后，该“返回顶部”的标签消失。另外，“返回顶部标签”绑定点击事件，通过鼠标点击，实现文档回到顶部的效果。

直接放js就可以显示

1. (function() {
   
2.     var btnId = '__gotop';
   
3.     var isIE = !!window.ActiveXObject && /msie (\d)/i.test(navigator.userAgent) ? RegExp['$1'] : false;
   
4. 
   
5.     function $() {
   
6.         return document.getElementById(arguments[0]);
   
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.     }   
    
15. 
    
16.     function bindEvent(event, func) {
    
17.         if (window.addEventListener) {
    
18.             window.addEventListener(event, func, false);
    
19.         } else if (window.attachEvent) {
    
20.             window.attachEvent('on' + event, func);
    
21.         }
    
22.     }
    
23. 
    
24.     bindEvent('load',
    
25.         function() {
    
26.             var css = 'background-color:#999;width:50px;height:50px;position:fixed;right:20px;bottom:30px;border-radius:10px;cursor:pointer;display:none;';
    
27. 
    
28.             if (isIE && isIE < 7) {
    
29.                 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)))';
    
30.                 var style = document.createStyleSheet();
    
31.                 style.cssText = '*html{background-image:url(about:blank);background-attachment:fixed;}';
    
32.             }
    
33. 
    
34.             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>';
    
35.             var el = document.createElement('DIV');
    
36.             el.id = btnId;
    
37.             el.style.cssText = css;
    
38.             el.innerHTML = html;
    
39.             document.body.appendChild(el);
    
40. 
    
41.             el.onclick = function() {
    
42.                 (function() {
    
43.                     var top = getScrollTop();
    
44.                     if (top > 0) {
    
45.                         window.scrollTo(0, top / 1.2)
    
46.                         setTimeout(arguments.callee, 10);
    
47.                     }
    
48.                 })();
    
49.             };
    
50. 
    
51.             el.onmouseover = function() {
    
52.                 $(btnId).firstChild.style.borderBottom = '14px solid #ddd';
    
53.                 $(btnId).firstChild.firstChild.style.backgroundColor = '#ddd';
    
54.             };
    
55. 
    
56.             el.onmouseout = function() {
    
57.                 $(btnId).firstChild.style.borderBottom = '14px solid #fff';
    
58.                 $(btnId).firstChild.firstChild.style.backgroundColor = '#fff';
    
59.             };
    
60.         }
    
61.     );
    
62. 
    
63.     bindEvent('scroll',
    
64.         function() {
    
65.             var top = getScrollTop(), display = 'none';
    
66. 
    
67.             if (top > 0) {
    
68.                 display = 'block';
    
69.             }
    
70. 
    
71.             if ($(btnId)) $(btnId).style.display = display;
    
72.         });
    
73. })();

复制代码