回到顶部练习 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .toTop{
 8             width: 40px;
 9             height: 40px;
10             background: pink;
11             font-size: 14px;
12             text-align: center;
13             color: #fff;
14             position: fixed;
15             right:100px;
16             bottom:100px;
17             cursor: pointer;
18             display: none;
19         }
20         body{
21             height: 2000px;
22         }
23     </style>
24 </head>
25 <body>
26 <div class="toTop">回到顶部</div>
27 <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
28 <script type="text/javascript">
29     //   滚动距离超过首屏之后再显示  回到顶部按钮   小于这个距离  还要接着隐藏
30     $top=$('.toTop')
31     // document.onscroll=function(){
32     //     var pageHight=document.documentElement.clientHeight;
33     //     var scrollHight=$('html,body').scrollTop();
34     //     if(scrollHight>pageHight){
35     //         $top.show()
36     //     }else{
37     //         $top.hide()
38     //     }
39     // }
40     
41     //纯jq写法
42     $(window).scroll(function(){
43         var pageHight= $(window).height();// $(window)，视口的高度
44         console.log(pageHight)
45         var scrollhight=$('html,body').scrollTop()
46         if(scrollhight>pageHight){
47             $top.show()
48         }else{
49             $top.hide()
50         }
51         
52     })
53     
54     
55  $(function () {
56 //     动画总时长
57    var time = 3000;
58 //   动画帧时长       总时长/帧时长 = 总帧数（步数）
59    var itemTime = 30;
60 
61 //   回到顶部 给按钮绑定单击事件
62      $('.toTop').click(function () {
63 //       获取总偏移（当前页面滚动条的坐标）
64          var offset = $('html').scrollTop() + $('body').scrollTop();
65 //       单次偏移      总偏移 / 总帧数(就是动画总时长 / 帧时长)
66          var itemOffset = offset / ( time / itemTime );
67 
68 //         启动定时器   时间为帧时长  在定时器内 每一次减掉一个单次偏移
69          var timer = setInterval(function () {
70            offset -= itemOffset;
71 //           滚动条到达顶部之后  清除定时器
72              if(offset <= 0){
73                clearInterval(timer);
74 //               修正滚动条位置   这一步可以省略
75                  // $('html,body').scrollTop(0);
76                  offset=0;
77              }
78 //           设置滚动条的坐标
79              $('html,body').scrollTop(offset);
80          },itemTime)
81      })
82  })
83 </script>
84 </body>
85 </html>

 

posted @ 2020-05-24 20:11  全情海洋  阅读(125)  评论(0)    收藏  举报