1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .pg-header{
8 height: 48px;
9 background-color: tan;
10 color: darkslateblue;
11 position: fixed;
12 top:0;
13 right: 0;
14 left: 0;
15 }
16 .pd-body{
17 height: 5000px;
18 background-color: #dddddd;
19 margin-top: 50px;
20 position:relative;
21 width: 500px;
22 border: 1px solid red;
23
24 }
25 </style>
26 </head>
27 <body>
28 <!--现在有个黑色的框白色"返回顶部"字体, 默认是一层，黑色和灰色平行放着。我们要的效果是分层，把黑色的放到灰色背景上。-->
29 <!--<div style="width: 50px;height: 50px;background: black;color: white;">返回顶部</div>-->
30
31 <!--增加position: fixed;表示这个div固定起来，并且可以分层叠起来，但是并没有指定固定在那里。我们还需要获取屏幕的高度和宽度-->
32 <!--position没有这么麻烦，直接有可以写top:0; right:0; 这个就是右上角，顶部为0，右边为0-->
33 <!--右下角：bottom: 20px;right: 20px;-->
34 <!--实现点击"返回顶部"立马拉到顶部，这个需要js实现-->
35 <div onclick="GoTop()" style="width: 50px;height: 50px;background-color: black;color: white;
36 position: fixed;
37 bottom: 20px;
38 right: 20px;
39 ">返回顶部</div>
40 <!-- 高度5000像数制造一个分屏效果-->
41 <div class="pd-body" >主屏
42 <!--position: relative +absolute 可以组合 使用 ，相对定位-->
43 <div style="position: absolute;right: 0;top:0;width: 50px;height: 50px;background-color: lightcoral">
44 相对位置
45 </div>
46 </div>
47 <div class="pg-header">
48 头部
49 </div>
50 <script>
51 function GoTop(){
52 // document.body.scrollTop = 0;
53 document.documentElement.scrollTop = 0;
54 // document.body.scrollTop = document.documentElement.scrollTop = 0;
55 }
56 </script>
57 </body>
58 </html>
