js实现网页滚动条回到顶部
<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta http-equiv=X-UA-Compatible content=IE=edge> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>Document</title> </head> <style> body{ cursor: pointer; } .top{ width: 100%; height: 100px; background-color: aqua; position: fixed; top: 0; left: 0; display: none; } .top input{ width: 500px; height: 20px; border: 1px solid #000; margin: 40px 500px; } .box{ width: 20px; } .totop{ position: fixed; right: 50px; bottom: 150px; width: 50px; height: 50px; line-height: 50px; text-align: center; border: 1px solid #000; display: none; } </style> <body> <div class=top> <input type=search value=这是顶部> </div> <div class=box> 不要问我 一生曾经爱过多少人 你不懂我伤有多深 要剥开伤口总是很残忍 劝你别做痴心 多情暂且保留几分 不喜欢孤独 却又害怕两个人相处 这分明是一种痛苦 在人多时候最沉默 笑容也寂寞 在万丈红尘中 啊 找个人爱我 当我避开你的柔情后 泪开始坠落 是不敢不想不应该 再谢谢你的爱 我不得不存在 像一颗尘埃 还是会带给你伤害是不敢不 不应该 我不得不存在 在你的未来 最怕这样就是带给你永远的伤害 不喜欢孤独 却又害怕两个人相处 这分明是一种痛苦 在人多时候最沉默 笑容也寂寞 在万丈红尘中 找个人爱我 当我避开你的柔情后 泪开始坠落 是不敢不想不应该 再谢谢你的爱 我不得不存在 像一颗尘埃 还是会带给你伤害 是不敢不想不应该 再谢谢你的爱 我不得不存在 啊 在你的未来 最怕这样就是带给你永远的伤害 </div> <div class=totop> 顶部 </div> </body> <script> //获取top var topbox = document.querySelector('.top'); var totop = document.querySelector('.totop'); window.onscroll = function(){ // 兼容写法 var t = document.documentElement.scrollTop || document.body.scrollTop // 判断滚动条的高度让顶部和回到顶部按钮显示和隐藏 if(t >= 3000){ topbox.style.display = totop.style.display = 'block' }else{ topbox.style.display = totop.style.display = 'none' } // console.log(h); } // 给回到顶部按钮添加点击事件 totop.onclick = function(){ // 兼容写法 var t = document.documentElement.scrollTop || document.body.scrollTop // 设置定时器制作动画效果 var timer = setInterval(function(){ // 高度自减回收过程 t -= 20 console.log(1) // 当高度为0清除定时器 - 停止动画 if(t <= 0){ clearInterval(timer) } // 重新将高度t赋值给滚动的高度 document.documentElement.scrollTop = document.body.scrollTop = t },20) } </script> </html> 效果图：
滚动条在初始位置时
滚动条到达指定位置时 - - 点击下面顶部按钮就会慢慢滚动到初始位置
