首页简单返回顶部代码及注释说明

简单返回顶部代码及注释说明

时间: 2023-09-03 16:16:47 浏览: 64

以下是一个简单的返回顶部代码及注释说明： ```html <!DOCTYPE html> <html> <head> <title>返回顶部</title> <style> /* 按钮样式 */ #btn { display: none; /* 隐藏按钮 */ position: fixed; /* 固定在屏幕右下角 */ bottom: 30px; right: 30px; z-index: 99; font-size: 18px; border: none; outline: none; background-color: #555; color: white; cursor: pointer; padding: 15px; border-radius: 10px; } /* 当页面滚动时，显示按钮 */ #btn.show { display: block; } </style> </head> <body>  <button id="btn" onclick="topFunction()">返回顶部</button> <script> // 当页面滚动时，显示/隐藏返回顶部按钮 window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { document.getElementById("btn").classList.add("show"); } else { document.getElementById("btn").classList.remove("show"); } } // 点击按钮返回顶部 function topFunction() { document.body.scrollTop = 0; // Safari document.documentElement.scrollTop = 0; // Chrome, Firefox, IE and Opera } </script> </body> </html> ``` 注释说明： 1. `#btn`：按钮的 CSS 样式。 2. `#btn.show`：当页面滚动时，显示按钮的 CSS 样式。 3. `window.onscroll`：当页面滚动时触发的事件。 4. `scrollFunction()`：页面滚动时执行的函数。 5. `document.body.scrollTop`：页面在 Y 轴上的滚动距离（适用于 Safari 浏览器）。 6. `document.documentElement.scrollTop`：页面在 Y 轴上的滚动距离（适用于 Chrome、Firefox、IE 和 Opera 浏览器）。 7. `topFunction()`：点击按钮时执行的函数。

阅读全文