1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>回到顶部</title> 8 <style> 9 * { padding: 0; margin: 0; } 10 #box {width: 100%;height: 2400px;margin: auto;border: 1px solid red;box-sizing: border-box;} 11 #top {width: 60px;height: 50px;line-height: 50px;background-color: orange;color: #fff;font-size: 12px;text-align: center;position: fixed; 12 right: 20px;bottom: 20px;text-decoration: none;display: none; 13 } 14 </style> 15 </head> 16 <body> 17 <div id="box"></div> 18 <a href="javascript:;" id="top">返回顶部</a> 19 </body> 20 <script> 21 window.onload = function () { 22 var oTop = document.getElementById('top') 23 // 获取页面可视区的高度 24 var clientHeight = document.documentElement.clientHeight 25 var timer = null 26 var isTop = true 27 28 // 滚动条滚动时触发 29 window.onscroll = function () { 30 var osTop = document.documentElement.scrollTop || document.body.scrollTop 31 if (osTop >= clientHeight) { 32 oTop.style.display = 'block' 33 } else { 34 oTop.style.display = 'none' 35 } 36 if (!isTop) { 37 clearInterval(timer) 38 } 39 isTop = false 40 } 41 42 oTop.onclick = function () { 43 timer = setInterval(function () { 44 // 获取滚动条距离顶部的高度 45 var osTop = document.documentElement.scrollTop || document.body.scrollTop 46 var ispeed = Math.floor(-osTop / 5) 47 document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed 48 isTop = true 49 if (osTop === 0) { 50 clearInterval(timer) 51 } 52 }, 30) 53 } 54 } 55 </script> 56 </html> 57