首页 > 代码库 > 回到顶部效果
回到顶部效果
回到顶部效果：
可以中途暂停，达到一屏幕才出现totop按钮，不到一屏按钮消失。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>回到顶部效果</title> <style> body { height: 10000px; } p { position: fixed; right: 20px; bottom: 20px; width: 50px; height: 50px; background: rgba(102,102,102,0.3); font-size: 18px; line-height: 50px; text-align: center; color: #333; cursor: pointer; display: none; } p:hover { background: rgba(102,102,102,1); color: #fff; } </style></head><body> <p id="totop">Totop</p> <script> window.onload = function () { var totop = document.getElementById(‘totop‘); var clientHeight = document.documentElement.clientHeight; console.log(clientHeight); var timer = null; var isTop = true; window.onscroll = function () { var t = document.documentElement.scrollTop || document.body.scrollTop; console.log(t); if (t >= clientHeight) { totop.style.display =‘block‘; }else if(t < clientHeight) { totop.style.display =‘none‘; } if(!isTop) { clearInterval(timer); } isTop = false; } totop.onclick = function () { clearInterval(timer); timer = setInterval(function () { //获取滚动条距离顶部的距离 var t = document.documentElement.scrollTop || document.body.scrollTop; var speed = Math.floor(-t / 30); document.documentElement.scrollTop = document.body.scrollTop = t + speed; console.log(t - speed); isTop = true; if (t == 0) { clearInterval(timer); } }, 30); } } </script></body></html>
回到顶部效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。