为网页添加一个gotoTop(回到顶部)按钮

Kvin

1. /**
   
2. * 在页面上产生个gotop按钮。
   
3. * 用纯粹的JS实现，无须额外的CSS和HTML支持。
   
4. *
   
5. * @param int width 网页的主体宽度，以下三种取值
   
6. * - 0 按钮靠浏览器左
   
7. * - -1 按钮靠流利器右
   
8. * - 其它正数 按钮靠网页内容右侧
   
9. * @return void
   
10. * @link http://blog.830725.com/post/add-goto-top-button.html
    
11. */
    
12. function gotoTop(width)
    
13. {
    
14.   document.write('<a id="goto-top">^</a>');
    
15.   var gotop = document.querySelector('#goto-top');
    
16.   /* 默认情况下CSS属性的设置 */
    
17.   gotop.style.visibility='hidden';
    
18.   gotop.style.cursor='pointer';
    
19.   gotop.style.position = 'fixed';
    
20.   gotop.style.fontSize='2.5em';
    
21.   gotop.style.fontWeight='900';
    
22.   gotop.style.textAlign='center';
    
23.   gotop.style.background = 'gray';
    
24.   gotop.style.borderRadius = '0.2em';
    
25.   gotop.style.width='1.4em';
    
26.   gotop.style.height='1em';
    
27.   gotop.style.top = (document.documentElement.clientHeight / 2) + 100 + 'px';
    
28.   gotop.style.opacity='0.3';
    
29.   gotop.style.visibility = (document.body.scrollTop + document.documentElement.scrollTop > 10) ? 'visible' : 'hidden';
    
30.   if(0 == width)
    
31.   { gotop.style.left = '0em';  }
    
32.   else if(-1 == width)
    
33.   { gotop.style.right = '0em';  }
    
34.   else
    
35.   {
    
36.   var resize = function()
    
37.   {
    
38.   var left = (document.documentElement.clientWidth - width) / 2 + width + 10;
    
39.   if((left - gotop.clientWidth) < width)
    
40.   {
    
41.   gotop.style.right='0em';
    
42.   gotop.style.left = null;  // 设定了right属性，则需要取消left属性。
    
43.   }
    
44.   else
    
45.   {
    
46.   gotop.style.left = left + 'px';
    
47.   gotop.style.right = null;
    
48.   }
    
49.   };
    
50.   resize();
    
51.   window.addEventListener('resize', function()
    
52.   {
    
53.   resize();
    
54.   }, false);
    
55. 
    
56.   }
    
57.   gotop.addEventListener('mouseover', function()
    
58.   {
    
59.   this.style.opacity='0.8';
    
60.   this.style.textDecoration='none';
    
61.   }, false);
    
62.   gotop.addEventListener('mouseout', function()
    
63.   {
    
64.   this.style.opacity='0.3';
    
65.   }, false);
    
66.   gotop.addEventListener('click', function()
    
67.   {
    
68.   // IE9和opera下body.scrollTop为0，chrome下documentElement.scrollTop为0
    
69.   // 两者始终有一个为0
    
70.   var h = document.body.scrollTop + document.documentElement.scrollTop; // 当前位置
    
71.   var t = window.setInterval(function()
    
72.   {
    
73.   window.scrollTo(0,h -= 100); // 每次上移100像素
    
74.   if(h <= 0)
    
75.   { window.clearInterval(t);  }
    
76.   }, 5);
    
77.   }, false);
    
78.   /* 通过window.onscroll事件确定按钮是否需要显示 */
    
79.   window.addEventListener('scroll', function()
    
80.   {
    
81.   var scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
    
82.   gotop.style.visibility = scrollTop > 10 ? 'visible':'hidden';
    
83.   }, false);
    
84. };

复制代码