我们在网页中应该经常可以看到回到顶部这个功能，这个功能也比较简单。那么，我就来记录下自己所知道的方法。
使用scrollTop实现
首先，来简单概括下使用这个方式实现 回到顶部 功能的原理。
- 根据网页的滚动高度，判断能否显示回到顶部按钮。
- 点击按钮时，触发回到顶部事件，追求视觉效果的话，可以加入一个定时器。
思路理完之后就是如何用代码实现了
<div> <p @click="backtop">回到顶部<p></div><script> export default { mounted() { window.addEventListener("scroll",this.showbtn,true); }, methods: { // 显示回到顶部按钮 showbtn(){ let that = this; let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; that.scrollTop = scrollTop }, /** * 回到顶部功能实现过程： * 1. 获取页面当前距离顶部的滚动距离（尽管IE不常用了，但还是需要考虑一下兼容性的） * 2. 计算出每次向上移动的距离，用负的滚动距离除以5，由于滚动的距离是一个正数，想向上移动就是做一个减法 * 3. 用当前距离加上计算出的距离，而后赋值给当前距离，即可以达到向上移动的效果 * 4. 最后记得在移动到顶部时，清理定时器 */ backtop(){ var timer = setInterval(function(){ let osTop = document.documentElement.scrollTop || document.body.scrollTop; let ispeed = Math.floor(-osTop / 5); document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed; this.isTop = true; if(osTop === 0){ clearInterval(timer); } },30) } } }</script>使用锚点实现
这个方法就比较古老又简陋了，还是在大学时期，刚接触到前台时，老师教过的锚点。
<a> 标签是一个很神奇的标签，使用这个标签可以达到返回顶部的效果，但是比较生硬，没有任何过渡效果。
<div> <a href="#top">回到顶部</a> // 这个方法就是为 href 赋值，实现功能</div>使用 jQuery 实现
能使用原生JS实现的也就能使用jquery实现，只不过我认为为了实现一个小功能，再引入一个框架有点不划算，但假如你是使用jquery写的项目，即可以使用以下的方法实现。
<div> <p id="backtop">回到顶部</p></div><script> function backtop(minHeight){ // 获取页面最小高度，假如没有传入值就默认600 minHeight ? minHeight = minHeight : minHeight = 600 // 为当前页面绑定滚动事件 $(window).scroll(function() { // 获取页面滚动高度 let osTop = $(window).scrollTop(); // 假如滚动高度大于页面视口高度，就渐显图标，否则就渐隐图标 if(osTop > minHeight){ $("#backtop").fadeIn(500); }else { $("#backtop").fadeOut(500); } }) // 定义回到顶部动画 $("#backtop").click( function(){$('html,body').animate({scrollTop:'0px'},'slow'); )}</script>
