前端置顶

 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

相关阅读:
JSON初试
 for ...in 、for each ...in、 for...of(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of)
WPF MVVM 模式下的弹窗
 『简易日志』NuGet 日志包 SimpleLogger
WPF 让一组 Button 实现 RadioButton 的当前样式效果
 IIS 错误解决：当前标识没有对 Temporary ASP.NET Files 的写访问权限
 [读书笔记] 《大话设计模式》
WPF 原生绑定和命令功能使用指南
 ASP.NET Core MVC 网站学习笔记
 在香蕉派的树莓派系统上配置 Syncthing 自启动
原文地址：https://www.cnblogs.com/yueyongsheng/p/14984879.html