| 标题 | 基于JavaScript实现回到页面顶部动画代码 |
| 范文 | 这篇文章主要介绍了基于JavaScript实现回到页面顶部动画代码的相关资料,代码简单易用，非常实用，需要的朋友可以参考下 最近做的都是前端的项目，很多项目都有回到顶部的需求，下面把我写js代码做个笔录，方便以后查找。 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能， 参考了imooc上相关课程，最终实现JS代码如下： //页面加载后触发 window.onload = function(){ var btn = document.getElementById('btn'); var timer = null; var isTop = true; //获取页面可视区高度 var clientHeight = document.documentElement.clientHeight; //滚动条滚动时触发 window.onscroll = function() { //显示回到顶部按钮 var osTop = document.documentElement.scrollTop || document.body.scrollTop; if (osTop >= clientHeight) { btn.style.display = "block"; } else { btn.style.display = "none"; }; //回到顶部过程中用户滚动滚动条，停止定时器 if (!isTop) { clearInterval(timer); }; isTop = false; }; btn.onclick = function() { //设置定时器 timer = setInterval(function(){ //获取滚动条距离顶部高度 var osTop = document.documentElement.scrollTop || document.body.scrollTop; var ispeed = Math.floor(-osTop / 7); document.documentElement.scrollTop = document.body.scrollTop = osTop+ispeed; //到达顶部，清除定时器 if (osTop == 0) { clearInterval(timer); }; isTop = true; },30); }; }; 以上内容是小编给大家介绍的基于JavaScript实现回到页面顶部动画代码，代码简单易懂，所有没给大家附太多的注释 |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。