前端

2023-09-18 11:21:50 +08:00
parent 8038f02f30
commit 85e41f3ef9
31 changed files with 1802 additions and 30 deletions
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="author" content="flykhan" />
+    <meta name="keywords" content="c c++ 物联网" />
+    <title>回到顶部</title>
+    <style>
+      .panel {
+        height: 400px;
+        background-color: skyblue;
+        margin: 10px 100px;
+        border-radius: 20px;
+        text-align: center;
+        line-height: 400px;
+      }
+
+      .topBtn {
+        display: none;
+        width: 50px;
+        height: 50px;
+        line-height: 50px;
+        border-radius: 50%;
+        padding: 10px;
+        border: 1px solid lightgray;
+        text-align: center;
+        cursor: pointer;
+        user-select: none;
+      }
+
+      .topBtn:hover {
+        background-color: lightsalmon;
+      }
+
+      .topBtn:active {
+        background-color: lightgreen;
+      }
+
+      #rightBtns {
+        position: fixed;
+        right: 10px;
+        bottom: 100px;
+      }
+    </style>
+  </head>
+
+  <!-- 页面滚动 -->
+  <body onscroll="pageScoll(event)">
+    <!-- 右边按钮组，悬浮在右边 -->
+    <div id="rightBtns">
+      <span class="topBtn">到顶</span>
+    </div>
+    <div id="d1" class="panel">aBc</div>
+    <div id="d2" class="panel">aBc</div>
+    <div id="d3" class="panel">aBc</div>
+    <div id="d4" class="panel">aBc</div>
+    <div id="d5" class="panel">aBc</div>
+    <div id="d6" class="panel">aBc</div>
+    <script>
+      function pageScoll() {
+        // 获取滚动条的位置
+        let scrollTop = document.documentElement.scrollTop;
+        if (scrollTop > 500) {
+          // topBtn.style.display = "online-block";
+          .style.display =
+            "online-block";
+        }
+      }
+
+      function backTop()
+      {
+        document.documentElement.scrollTo(0,0);
+      }
+    </script>
+  </body>
+</html>