JS实现回到页面顶部动画效果 2016.03.23
2016-05-24 11:47
761 查看
最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下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); }; };
相关文章推荐
- js call 方法
- 12个JavaScript技巧
- js默认当月日期以及时间比较
- 代码高亮插件prettyPrint.js使用与下载
- Javascript 中的false、0、null、undefined和空字符串对象
- a 标签中调用js的几种方法
- json
- JSP页面标签
- setTimeout 的黑魔法
- JavaScript概览(一)--基本语法
- json与泛型互转和json与datatable互转
- jsp页面中jstl标签详解
- JSON 弹窗
- [Effective JavaScript 笔记]第2章:变量作用域--个人总结
- tab标签切换js
- JS实现base64加密解密
- JS特效之日历输入框(日历控件)
- [Effective JavaScript 笔记]第17条:间接调用eval函数优于直接调用
- ExtJs (3.2.0)文件目录介绍、文件删减、文件引用
- JS特效之倒计时