JavaScript如何实现网页带动画返回顶部
导读：本文共3918字符，通常情况下阅读需要13分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要：这篇“JavaScript如何实现网页带动画返回顶部”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“JavaScript如何实现网页带动画返回顶部”文章吧。第一个版本：<body><divid="topAnchor"></div>... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。这篇“JavaScript如何实现网页带动画返回顶部”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“JavaScript如何实现网页带动画返回顶部”文章吧。
第一个版本：
<body><divid="topAnchor"></div><ahref="#topAnchor"rel="externalnofollow">回到顶部</a></body>
这个没用js，单纯的使用锚点试了一下，好用。
好用是好用，但是用户体验不是很好，嗖的一下就回到顶部了。不好。
我不太喜欢使用jquery，不管坐什么都喜欢用原生，所以，我这里用原生JavaScript写了一个带动画的，大概是这样。
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>返回顶部</title><styletype="text/css">*{margin:0;padding:0;}body{height:2000px;width:100%;}.to_top{width:60px;height:60px;bottom:10%;right:20px;font-size:40px;line-height:70px;border:none;background:rgba(0,0,0,0.2);cursor:pointer;opacity:0;transition:all1s;/*使点前标签始终置于最上层*/position:fixed;z-index:99999;}</style></head><body><divclass="to_top"><imgsrc="https://qixn-bj.oss-cn-beijing.aliyuncs.com/seosjz/uploadfile/all/jpg/lgfjnbfpmgs.jpg"alt=""width="70;"></div><scripttype="text/javascript">window.onscroll=function(){vartimer=null;//时间标识符varisTop=true;varobtn=document.getElementsByClassName('to_top')[0];obtn.onclick=function(){//设置定时器timer=setInterval(function(){varosTop=document.documentElement.scrollTop||document.body.scrollTop;//减小的速度varisSpeed=Math.floor(-osTop/6);document.documentElement.scrollTop=document.body.scrollTop=osTop+isSpeed;//判断，然后清除定时器if(osTop==0){clearInterval(timer);}isTop=true;//添加在obtn.onclick事件的timer中},30);};//获取页面的可视窗口高度varclient_height=document.documentElement.clientHeight||document.body.clientHeight;//在滚动的时候增加判断,忘了的话很容易出错varosTop=document.documentElement.scrollTop||document.body.scrollTop;if(osTop>=client_height){obtn.style.opacity='1';}else{obtn.style.opacity='0';}if(!isTop){clearInterval(timer);}isTop=false;}</script></body></html>以上代码可以放到html文件中可以直接运行。
代码具体含义其中基本都有注释。
有看不懂的地方，请自行百度。
方法补充
其实实现返回顶部效果的方法有很多，除了上文的方法，小编也为大家整理一些其他方法，感兴趣的可以尝试下
方法一
//页面加载后触发window.onload=function(){varbtn=document.getElementById('btn');vartimer=null;varisTop=true;//获取页面可视区高度varclientHeight=document.documentElement.clientHeight;//滚动条滚动时触发window.onscroll=function(){//显示回到顶部按钮varosTop=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(){//获取滚动条距离顶部高度varosTop=document.documentElement.scrollTop||document.body.scrollTop;varispeed=Math.floor(-osTop/7);document.documentElement.scrollTop=document.body.scrollTop=osTop+ispeed;//到达顶部，清除定时器if(osTop==0){clearInterval(timer);};isTop=true;},30);};};方法二
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>返回顶部效果</title><style>.slider-bar{position:absolute;left:47%;top:300px;margin-left:600px;45px;height:130px;background-color:pink;cursor:pointer;}.w{1100px;margin:10pxauto;}.header{height:150px;background-color:purple;}.banner{height:250px;background-color:skyblue;}.main{height:1000px;background-color:yellowgreen;}span{display:none;position:absolute;bottom:0;}</style></head><body><divclass="slider-bar"><spanclass="goBack">返回顶部</span></div><divclass="headerw">头部区域</div><divclass="bannerw">banner区域</div><divclass="mainw">主体部分</div><script>//querySelector()方法返回匹配指定选择器（）的第一个元素，传的必须是字符串varsliderbar=document.querySelector('.slider-bar');varbanner=document.querySelector('.banner');varbannerTop=banner.offsetTop;//banner模块距离顶部的长度varsliderbarTop=sliderbar.offsetTop-bannerTop;//侧边栏固定后距离顶部的长度varmain=document.querySelector('.main');vargoBack=document.querySelector('.goBack');varmainTop=main.offsetTop;//main模块距离顶部的长度//scroll屏幕发生滚动事件时执行document.addEventListener('scroll',function(){if(window.pageYOffset>=bannerTop){//window.pageYOffset屏幕被滚上去的距离sliderbar.style.position='fixed';//当用户滚到banner模块时使侧边栏变为固定状态sliderbar.style.top=sliderbarTop+'px';}else{sliderbar.style.position='absolute';sliderbar.style.top='300px';}if(window.pageYOffset>=mainTop){//当用户滚到main模块时显示返回顶部按钮goBack.style.display='block';}else{goBack.style.display='none';}});sliderbar.addEventListener('click',function(){animate(window,0);})/*动画函数：*obj做动画的对象（这里就是指window）*target目标位置（顶部）*callback回调函数（没有传参的话就不执行）*/functionanimate(obj,target,callback){clearInterval(obj.timer);//先清除定时器，保证只有一个定时器在执行，以免出现bugobj.timer=setInterval(function(){//window.pageYOffset距离顶部的距离（是负的）varstep=(target-window.pageYOffset)/10;//step步长（让页面速度逐渐变慢的滑动上去）step=step>0?Math.ceil(step):Math.floor(step);//step并不总是整数。大于零向上取整,小于零向下取整if(window.pageYOffset==target){//当页面回到顶部后(即动画执行完)清除定时器clearInterval(obj.timer);//判断是否传了回调函数/*if(callback){callback();}*///可以简写为下边这种。&&是短路运算符，存在callback（即第一个式子为true）时才会继续执行callback()callback&&callback();}//window.scroll(x,y)滚动到文档特定位置window.scroll(0,window.pageYOffset+step);},15);}</script></body></html>以上就是关于“JavaScript如何实现网页带动画返回顶部”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
本文：
JavaScript如何实现网页带动画返回顶部的详细内容，希望对您有所帮助，信息来源于网络。