前端置顶

 1 <html>
 2 <head>
 3     <style>
 4         #myBtn {
 5             display: none;
 6             position: fixed;
 7             bottom: 20px;
 8             right: 30px;
 9             z-index: 99;
10             border: none;
11             outline: none;
12             background-color: red;
13             color: white;
14             cursor: pointer;
15             padding: 15px;
16             border-radius: 10px;
17         }
18 
19             #myBtn:hover {
20                 background-color: #555;
21             }
22     </style>
23 </head>
24 <body>
25 
26     <button onclick="topFunction()" id="myBtn" title="回顶部">返回顶部</button>
27     <script>
28         // 当网页向下滑动 20px 出现"返回顶部" 按钮
29         window.onscroll = function () { scrollFunction() };
30 
31         function scrollFunction() {
32             console.log(121);
33             if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
34                 document.getElementById("myBtn").style.display = "block";
35             } else {
36                 document.getElementById("myBtn").style.display = "none";
37             }
38         }
39 
40         // 点击按钮，返回顶部
41         function topFunction() {
42             document.body.scrollTop = 0;
43             document.documentElement.scrollTop = 0;
44         }
45     </script>
46 
47 </body>
48 </html>

View Code

图片：

 1 <html>
 2 <head>
 3     <style>
 4         #myImg {
 5             display: none;
 6             position: fixed;
 7             bottom: 20px;
 8             right: 30px;
 9             z-index: 99;
10             border: none;
11             outline: none;
12             cursor: pointer;
13             padding: 15px;
14             border-radius: 10px;
15             height: 100px;
16         }
17 
18             #myImg:hover {
19                 content: url('../../Resources/images/equip/置顶 1.png');
20             }
21     </style>
22 </head>
23 <body>
24 
25     <img onclick="topFunction()" id="myImg" title="回顶部" src="~/Resources/images/equip/置顶.png" />
26     <script>
27         // 当网页向下滑动 20px 出现"返回顶部" 
28         window.onscroll = function () { scrollFunction() };
29 
30         function scrollFunction() {
31             console.log(121);
32             if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
33                 document.getElementById("myImg").style.display = "block";
34             } else {
35                 document.getElementById("myImg").style.display = "none";
36             }
37         }
38 
39         // 点击按钮，返回顶部
40         function topFunction() {
41             document.body.scrollTop = 0;
42             document.documentElement.scrollTop = 0;
43         }
44     </script>
45 
46 </body>
47 </html>

View Code

posted on 2021-07-08 10:17 小乐丶阅读(67) 评论(0) 编辑收藏举报