1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title></title>
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 list-style: none;
12 border: none;
13 }
14
15 body {
16 background-color: #ccc;
17 }
18
19 p {
20 margin-bottom: 20px;
21 text-align: center;
22 }
23
24 #top {
25 width: 43px;
26 height: 43px;
27 background: url("images/top.png") no-repeat;
28 background-size: 100% 100%;
29 position: fixed;
30 right: 10px;
31 bottom: 30px;
32 display: none;
33 }
34 </style>
35 </head>
36
37 <body>
38 <span id="top"></span>
39 <div>
40 <p>今天天气很好!</p>
41 <p>今天天气很好!</p>
42 <p>今天天气很好!</p>
43 <p>今天天气很好!</p>
44 <p>今天天气很好!</p>
45 <p>今天天气很好!</p>
46 <p>今天天气很好!</p>
47 <p>今天天气很好!</p>
48 <p>今天天气很好!</p>
49 <p>今天天气很好!</p>
50 <p>今天天气很好!</p>
51 <p>今天天气很好!</p>
52 <p>今天天气很好!</p>
53 <p>今天天气很好!</p>
54 <p>今天天气很好!</p>
55 <p>今天天气很好!</p>
56 <p>今天天气很好!</p>
57 <p>今天天气很好!</p>
58 <p>今天天气很好!</p>
59 <p>今天天气很好!</p>
60 <p>今天天气很好!</p>
61 <p>今天天气很好!</p>
62 <p>今天天气很好!</p>
63 <p>今天天气很好!</p>
64 <p>今天天气很好!</p>
65 <p>今天天气很好!</p>
66 <p>今天天气很好!</p>
67 <p>今天天气很好!</p>
68 <p>今天天气很好!</p>
69 <p>今天天气很好!</p>
70 <p>今天天气很好!</p>
71 <p>今天天气很好!</p>
72 <p>今天天气很好!</p>
73 <p>今天天气很好!</p>
74 <p>今天天气很好!</p>
75 <p>今天天气很好!</p>
76 <p>今天天气很好!</p>
77 <p>今天天气很好!</p>
78 <p>今天天气很好!</p>
79 <p>今天天气很好!</p>
80 <p>今天天气很好!</p>
81 <p>今天天气很好!</p>
82 <p>今天天气很好!</p>
83 <p>今天天气很好!</p>
84 <p>今天天气很好!</p>
85 <p>今天天气很好!</p>
86 <p>今天天气很好!</p>
87 <p>今天天气很好!</p>
88 <p>今天天气很好!</p>
89 </div>
90 <script src="js/myFunc.js"></script>
91 <script>
92 window.onload = function () {
93 // 0. 变量
94 var scroll_top = 0, begin = 0, end = 0, timer = null;
95
96 // 1. 监听窗口的滚动
97 window.onscroll = function () {
98 // 1.1 获取滚动的高度
99 scroll_top = scroll().top;
100 // 1.2 显示和隐藏
101 scroll_top > 0 ? show($('top')) : hide($('top'));
102 begin = scroll_top;
103 //console.log(begin)
104 };
105
106 // 2. 监听点击
107 $("top").onclick = function () {
108 // 2.1 清除定时器
109 clearInterval(timer);
110
111 // 2.2 开启缓动动画
112 timer = setInterval(function () {
113 begin = begin + (end - begin) / 20;
114 window.scrollTo(0, begin); ///水平 垂直
115
116 // 2.3 清除定时器
117 console.log(begin, end);//end 0 begin c从大到小
118 if (Math.round(begin) === end) {
119 clearInterval(timer);
120 }
121 }, 20);
122 }
123 }
124 </script>
125 </body>
126
127 </html>
1 /**
2 * 获取滚动的头部距离和左边距离
3 * scroll().top scroll().left
4 * @returns {*}
5 */
6 function scroll() {
7 if(window.pageYOffset !== null){
8 return {
9 top: window.pageYOffset,
10 left: window.pageXOffset
11 }
12 }else if(document.compatMode === "CSS1Compat"){ // W3C
13 return {
14 top: document.documentElement.scrollTop,
15 left: document.documentElement.scrollLeft
16 }
17 }
18
19 return {
20 top: document.body.scrollTop,
21 left: document.body.scrollLeft
22 }
23 }
24
25
26 function $(id) {
27 return typeof id === "string" ? document.getElementById(id) : null;
28 }
29
30
31 function show(obj) {
32 return obj.style.display = 'block';
33 }
34
35 function hide(obj) {
36 return obj.style.display = '';
37 }
