下面小编就为大家带来一篇JS实现回到页面顶部动画效果的简单实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
最近在模仿各大网站写页面样式和交互，发现好多都有回到顶部的需要，所以写了一下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); }; };
以上就是JS实现回到页面顶部动画效果的简单实例的详细内容，更多请关注本站其它相关文章！
