基于JavaScript实现回到页面顶部动画代码
2016-05-24 13:46
796 查看
最近做的都是前端的项目,很多项目都有回到顶部的需求,下面把我写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实现回到页面顶部动画代码,代码简单易懂,所有没给大家附太多的注释,如果大家在参考过程中发现有任何疑问欢迎给我留言,小编会及时回复大家的!
您可能感兴趣的文章:
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- js数组实现图片轮播
- js可突破windows弹退效果代码
- 空间页面CSS说明
- JSP脚本漏洞面面观
- jsp简单实现页面之间共享信息的方法
- 使用BAT一句话命令实现快速合并JS、CSS
- js显示当前星期的起止日期的脚本
- C#页面之间跳转功能的小结
- 爆炸式的JS圆形浮动菜单特效代码
- js select常用操作控制代码
- MySQL页面访问统计及排名情况
- JS实现不使用图片仿Windows右键菜单效果代码
- 从jsp发送动态图像
- 原生js结合html5制作小飞龙的简易跳球
- html页面中图像格式的选用之我见第1/2页
- js 页面模块自由拖动实例