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 width: 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 width: 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>
