<!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>
效果圖：
滾動條在初始位置時
滾動條到達指定位置時 - - 點擊下面頂部按鈕就會慢慢滾動到初始位置
