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

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