基于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 autocomplete插件修改
Apr 17 Javascript
JQuery的ajax基础上的超强GridView展示
Sep 18 Javascript
基于jQuery的简单的列表导航菜单
Mar 02 Javascript
查看源码的工具 学习jQuery源码不错的工具
Dec 26 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
Javascript前端经典的面试题及答案
Mar 14 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
解决vue中的无限循环问题
Jul 27 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
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
一个显示天气预报的程序
2006/10/09 PHP
PHP读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
PHP imagecreatefrombmp 从BMP文件或URL新建一图像
2012/07/16 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
详解在Vue中有条件地使用CSS类
2017/09/30 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python单例模式的两种实现方法
2017/08/14 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
python使用Matplotlib画条形图
2020/03/25 Python
python编写俄罗斯方块
2020/03/13 Python
工厂实习感言
2014/01/14 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
微电影大赛策划方案
2014/06/05 职场文书
党员对照检查材料
2014/09/22 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书
Nginx快速入门教程
2021/03/31 Servers
MySQL查询学习之基础查询操作
2021/05/08 MySQL
python字典进行运算原理及实例分享
2021/08/02 Python