<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>回到顶部</title> <link rel="stylesheet" href="css.css"> <script src="js.js"></script> </head> <body style="height: 2000px;"> <input id="btn" type="button" value="回到顶部"> </body> </html>
css.css
input { position: fixed; bottom: 0; right: 10px; 100px; height: 50px; background: rgba(220, 153, 255, 0.94); border: 0; outline: none; color: #C700FF; font-size: 18px; border-radius: 10px; cursor: pointer; }
js.js
window.onload = function() { var oBtn = document.getElementById('btn'); var timer = null; //存放一个定时器 var bSys = true; //判断是不是系统在滚动页面 //页面滚动时触发事件 window.onscroll = function() { //如果不是系统在滚动页面就是用户在拖动页面 if (!bSys) { //清除定时器 clearInterval(timer); } bSys = false; }; oBtn.onclick = function() { //点击按钮时开启定时器 timer = setInterval(function() { //获取滚动条距浏览器顶部距离 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条每30毫秒滚动的距离 var iSpeed = Math.ceil(scrollTop / 5); document.documentElement.scrollTop = document.body.scrollTop = scrollTop - iSpeed; if (scrollTop == 0) { //如果滚动条距浏览器顶部为零,清空定时器 clearInterval(timer); } bSys = true; }, 30) } }