<!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>
效果图:
滚动条在初始位置时
滚动条到达指定位置时 - - 点击下面顶部按钮就会慢慢滚动到初始位置