vue实现回到顶部

1、vue如何实现回到顶部

浏览网页的时候经常看到回到顶部这个功能，具体怎么实现呢？后面总结再说，怕你们等不及划走

废话不多说，直接上代码，复制代码就能直接运行
文件是vue文件，在router--index.js里添加路由才能运行`

index.js

PS：记得更改vue文件路径

{
	 path: '/top',
	 name: 'top',
	 component:() => import('@/views/back_top.vue') // 记得更改vue文件路径`
},

back_top.vue

<template>
  <div class="back-top">
    <van-icon
      href="javascript:void(0);"
      class="top"
      name="back-top"
      @click="backTop"
      v-if="showBtn"
    />
    <p style="text-align: center;">往下拉，出现回到顶部按钮</p>
    <div v-for="s in 100" class="background-color">{{s}}</div>
  </div>
</template>

<script>
  import Vue from 'vue';
  export default {
    data() {
      return {
        showBtn: false, // 回到顶部，默认是false，就是隐藏起来
      }
    },

    created() {

    },
    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;
        if (scrollTop > 900) {
            this.showBtn = true;
        } else {
            this.showBtn = false;
        }
      },
      
		/*回到顶部实现过程注解：
        1.获取当前页面距离顶部的距离
        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>

<style>

  .top {
    height: 35px;
    width: 37px;
    position: fixed;
    right: 4%;
    bottom: 11%;
    text-align: center;
    line-height: 35px;
    font-size: 25px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0px 1px 3px 1px #888888;
    z-index: 999;
  }

  .background-color{
    width: 100%;
    height: 80px;
    background-color: pink;
  }
</style>

---

2、总结

这个回到顶部动能是使用scrollTop实现的
首先，我来简单介绍一下原理

    1.根据网页的滚动高度，判断是否显示回到顶部功能按钮,这里我设置了900的高度

    2.点击按钮时，触发回到顶部事件，如果要追求视觉效果的话，可以加入定时器。
    
    3.加了定时器，就是实现点击之后它会有一个慢慢向上滑动的效果

3、具体实现效果如下