基于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 相关文章推荐
简单实用的js调试logger组件实现代码
Nov 20 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
原生javascript单例模式的应用实例分析
Feb 23 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 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
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
dedecms函数分享之获取某一栏目所有子栏目
2014/05/19 PHP
PHP检查URL包含特定字符串实例方法
2019/02/11 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
Django rest framework基本介绍与代码示例
2018/01/26 Python
opencv3/C++ 平面对象识别&透视变换方式
2019/12/11 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
为什么要使用servlet
2016/01/17 面试题
桥梁与隧道工程专业本科生求职信
2013/10/08 职场文书
毕业生写求职信的要点
2014/03/04 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记
Springboot中如何自动转JSON输出
2022/06/16 Java/Android