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