基于JavaScript实现回到页面顶部动画代码
更新时间：2016年05月24日 13:46:42 作者：daisykoo
这篇文章主要介绍了基于JavaScript实现回到页面顶部动画代码的相关资料,代码简单易用，非常实用，需要的朋友可以参考下
最近做的都是前端的项目，很多项目都有回到顶部的需求，下面把我写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实现回到页面顶部动画代码，代码简单易懂，所有没给大家附太多的注释，如果大家在参考过程中发现有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
观察者模式（Observer Pattern）是一种行为型设计模式，它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象，本文将带你详细了解JavaScript 观察者模式，,需要的朋友可以参考下2023-05-05
这篇文章主要为大家详细介绍了JavaScript canvas实现文字时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
这篇文章主要介绍了javascript 使用sleep函数的常见方法,结合实例形式分析总结了javascript sleep函数的功能、常见使用方法与操作注意事项,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了js检测IE8及以下浏览器版本并做出提示的函数代码,需要的朋友可以参考下2023-02-02
dedecms在编辑修改内容时,TAG标签需要手动输,中文的Tag, 中间还得用半角字符','分隔, 输入法切来切去很不方便, 于是动手改后台代码, 利用后台的tags_main.php, 让dedecms添加内容时能去tags_main里去选择.2014-09-09
JAVASCRIPT中keycode总结，方便需要控制keycode的朋友2009-02-02
这篇文章主要介绍了深入了解JavaScript代码覆盖 ,代码覆盖提供有关是否以及可选地应用程序的某些部分被执行的频率的信息。它通常用于判定一个测试套件执行特定代码库的全面程度。,需要的朋友可以参考下2019-06-06![JavaScript使用技巧精萃[代码非常实用]](//img.jbzj.com/images/xgimg/bcimg7.png)
为方便大家查找不做分页设置ctrl+F即可2008-11-11
prototype它是用Javascript写好的一些API，包括对Javascript中的类如String，Array等进行的扩充，把JS文件嵌入后直接用就行了2010-04-04
下面小编就为大家带来一篇javascript对象的相关操作小结。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
![JavaScript使用技巧精萃[代码非常实用]](http://img.jbzj.com/images/xgimg/bcimg7.png)
最新评论