jQuery之scroll用法实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{
 8             margin:0;
 9             padding: 0;
10         }
11         .div1,.div2{
12              100%;
13             height: 800px;
14 
15         }
16         .div1{
17             /*border: 5px solid red;*/
18             /*padding: 20px;*/
19             /*margin: 2px;*/
20            background-color:antiquewhite;
21         }
22         .div2{
23             background-color:rebeccapurple;
24         }
25         .returntop{
26             position: fixed;
27             right: 20px;
28             bottom: 20px;
29              80px;
30             height: 50px;
31             background-color:yellow;
32             text-align: center;
33             line-height: 50px;
34         }
35         .hide{
36             display: none;
37         }
38     </style>
39 </head>
40 <body>
41 <div class="div1"></div>
42 <div class="div2"></div>
43 <div class="returntop hide" onclick="returntop()">返回顶部</div>
44 <script src="jquery-3.3.1.min.js"></script>
45 <script>
46     // 相对于视图窗口
47     // console.log($('.div1').offset().top);
48     // console.log($('.div1').offset().left);
49     //
50     // console.log($('.div2').offset().top);
51     // console.log($('.div2').offset().left)
52 
53      // console.log($('.div1').position().top);
54     // console.log($('.div1').position().left);
55 
56     // console.log($('.div2').position().top);
57     // console.log($('.div2').position().left)
58     window.onscroll=function () {
59         // console.log($(window).scrollTop())
60         if($(window).scrollTop()>50){
61             $('.returntop').removeClass('hide')
62         }
63         else {
64             $('.returntop').addClass('hide')
65         }
66     }
67     function returntop() {
68         $(window).scrollTop(0);
69     }
70 </script>
71 </body>
72 </html>