基于JavaScript实现回到页面顶部动画代码


Posted in Javascript onMay 24, 2016

最近做的都是前端的项目,很多项目都有回到顶部的需求,下面把我写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实现回到页面顶部动画代码,代码简单易懂,所有没给大家附太多的注释,如果大家在参考过程中发现有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
基于jquery的button默认enter事件(回车事件)。
May 18 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
基于js中document.cookie全面解析
Sep 14 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
JavaScript中将值转换为字符串的五种方法总结
Jun 06 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 #Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 #Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 #Javascript
jQuery中事件与动画的总结分享
May 24 #Javascript
jQuery根据表单name获取值的方法
May 24 #Javascript
深入理解jquery自定义动画animate()
May 24 #Javascript
深入理解jquery中的事件与动画
May 24 #Javascript
You might like
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
js验证表单大全
2006/11/25 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
jquery实现心算练习代码
2010/12/06 Javascript
js精度溢出解决方案
2012/12/02 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
js转义字符介绍
2013/11/05 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
Python with用法实例
2015/04/14 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
英国最大的百货公司:Harrods
2016/08/18 全球购物
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
英国门销售网站:Green Tree Doors
2020/01/07 全球购物
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
四好少年事迹材料
2014/01/12 职场文书
实习单位证明范例
2014/11/17 职场文书
检讨书格式
2015/01/23 职场文书
接收函格式
2015/01/30 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis
简单聊聊Golang中defer预计算参数
2022/03/25 Golang