回到顶部
Posted 小陈小陈
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了回到顶部相关的知识，希望对你有一定的参考价值。
今天写了一个回到顶部的demo,没有复杂的逻辑，所以想来分享。
原理：
1.css上把按钮固定定位在浏览器右下角上，默认为隐藏。
2.当页面滚动的时候（window.onscroll），按钮block,
3.当点击按钮的时候让页面的可视区高度距离浏览器顶端逐渐减少直至为0，
a)此时需要用到一个定时器，初设为每30毫秒执行一次，
b)设置一个参数iSpeed，初始设为300,让可视区高度距离浏览器顶端的距离每30毫秒减少300（参数，可变），直至为0.
4，当可视区距浏览器顶端的距离为0时，关闭定时器，按钮none。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>回到顶部</title> <style> #but1{ position: fixed; bottom: 0; right: 0; display: none; } </style> <script> window.onload = function(){ var oBtn = document.getElementById(‘but1‘); var timer = null; window.onscroll = function() { oBtn.style.display = ‘block‘; //当页面滚动时按钮呈现 var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; oBtn.onclick = function(){ var iSpeed = 200; timer = setInterval(function(){ var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; //可视区距页面顶端的距离 document.documentElement.scrollTop = document.body.scrollTop = scrollTop - iSpeed; if (scrollTop == 0) { //如果可视区到达顶部，取消定时器 clearInterval(timer); } },30); }; if (scrollTop == 0) { oBtn.style.display = ‘none‘; } } }; </script> </head> <body style="height:2000px;"> <input type="button" id="but1" value="回到顶部"/> </body> </html>
以上是关于回到顶部的主要内容，如果未能解决你的问题，请参考以下文章