大家好，欢迎来到IT知识分享网。
实现悬浮返回顶部功能的 HTML 代码示例，同时包含 CSS 和 JavaScript 代码来完成样式设计和交互逻辑。
<a href="#top" target="_self">返回顶部</a> <!--返回顶部--> <style> /* 全局样式 */ body { height: 2000px; margin: 0; padding: 0; font-family: Arial, sans-serif; } /* 返回顶部按钮样式 */ #gpczxs { display: none; position: fixed; bottom: 20px; right: 20px; background-color: #007BFF; color: white; border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 24px; cursor: pointer; outline: none; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); transition: background-color 0.3s; } #gpczxs:hover { background-color: #0056b3; } </style> </head> <body> <!-- 返回顶部按钮 --> <button id="gpczxs" title="返回顶部">↑</button> <script> // 获取返回顶部按钮元素 const backToTopButton = document.getElementById('gpczxs'); // 监听窗口滚动事件 window.onscroll = function () { // 当页面滚动距离超过 200 像素时显示按钮，否则隐藏 if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) { backToTopButton.style.display = "block"; } else { backToTopButton.style.display = "none"; } }; // 为返回顶部按钮添加点击事件监听器 backToTopButton.addEventListener('click', function () { // 平滑滚动到页面顶部 window.scrollTo({ top: 0, behavior: 'smooth' }); }); </script> </body> <!--返回顶部--> 免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/170788.html
