一.最简单的静态返回顶部
1.
用命名锚点击返回到顶部预设的id为top的元素
<a href="#top“>返回顶部</a>
2.
操作scrooll函数用来控制滚动条的位置(第一个参数是水平位置,第二个参数是垂直位置)
<a href="javascript:scroll(0,0)">返回顶部</a>
二.简单的静态返回顶部,用js模拟滚动效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #btn { position: fixed; bottom: 0; } </style> </head> <body style="height: 10000px"> <a href="javascript:;" id="btn">回到顶部</a> <script> window.onload = function(){ var btn = document.getElementById('btn'); // 获取视界高度; var winH = document.documentElement.clientHeight; // 定义计时器; var timer = null; // 定义是否抵达顶部布尔值判断; var isTop = true; // 设置滚动事件; window.onscroll = function(){ var toTop = document.body.scrollTop || document.documentElement.scrollTop; // 判断是否到了第二屏,若是,显示按钮; if (toTop >= winH) { btn.style.display = 'block'; }else{ btn.style.display = 'none'; }; // 判断是否抵达顶部,若否,停止计时器; if (!isTop) { clearInterval(timer); }; // 重置布尔值判断; isTop = false; } // 设置按钮单击事件; btn.onclick = function(){ // 设置计时器,50毫秒间隔; timer = setInterval(function(){ var toTop = document.body.scrollTop || document.documentElement.scrollTop; // 设置速度,用等式而不用具体数值是为了产生缓动效果; var speed = Math.ceil(toTop/5); // 作差,产生缓动效果; document.documentElement.scrollTop = document.body.scrollTop = toTop - speed; // 重置布尔值判断; isTop = true; // 判断是否抵达顶部,若是,停止计时器; if (toTop == 0) { clearInterval(timer); }; },50); } } </script> </body> </html>