回到顶部

  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              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 }