html代码|检测屏幕,返回顶部按钮(html点击返回顶部)
时间:2021-12-10 17:05:20 阅读:1235
下拉到一定程度的时候,显示一个【返回顶部】按钮
<script> // 当网页向下滑动 20px 出现"返回顶部" 按钮 window.onscroll = function() {scrollFunction()}; function scrollFunction() {console.log(121); if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { document.getElementById("myBtn").style.display = "block"; } else { document.getElementById("myBtn").style.display = "none"; } } // 点击按钮,返回顶部 function topFunction() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } </script> <style> /* 返回顶部css */ #myBtn { display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; border: none; outline: none; background-color: red; color: white; cursor: pointer; padding: 15px; border-radius: 10px; } #myBtn:hover { background-color: #555; } </style><br><br><br>测试<br><br><br>测试<br><br><br>测试<br><br><br>测试<br><br><br>测试<br><br><br>测试<br><br><br>测试<br><br><br><br><br><br><br><br><br> <button onclick="topFunction()" id="myBtn" title="回顶部">返回顶部</button>
网友评论