基于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插件
Nov 24 Javascript
Javascript 命名空间模式
Nov 01 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
Jun 24 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 Javascript
js代码实现轮播图
May 04 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
PHP5 安装方法
2006/10/09 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
numpy.where() 用法详解
2019/05/27 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
Python 必须了解的5种高级特征
2020/09/10 Python
python super()函数的基本使用
2020/09/10 Python
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
canvas绘制图片drawImage使用方法
2020/09/15 HTML / CSS
后勤副校长自我鉴定
2013/10/13 职场文书
办公室主任主任岗位责任制
2014/02/11 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
个人函授自我鉴定
2014/03/25 职场文书
英语演讲稿3分钟
2014/04/29 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
单位接收函格式
2015/01/30 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
公司文体活动总结
2015/05/07 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
2019入党申请书格式
2019/06/25 职场文书
MySQL 聚合函数排序
2021/07/16 MySQL
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript
CentOS安装Nginx并部署vue
2022/04/12 Servers