返回顶部的封装

在父组件中进行引入子组件

<template>
  <div>
    <!-- 
      1.调用子组件
      2.用document.documentElement.scrollTop要获取当前页面的滚动条纵坐标位置
      3.在子组件中给他设置一个li列表,然后使用v-for然后将数据循环到我们的页面当动
      4.给回到顶部设置一个点击事件,点击之后我们给他设置一个计时器
      5.点击返回顶部之后,我们点击回到顶部按钮，让距离逐渐减少，形成上划的效果
      6.如果我们的距离顶部的高度等于0的话将我们的定时器删除
     -->
    <div>回到顶部组件</div>
    <backTops></backTops>
  </div>
</template>
<script>
import backTops from '@/components/backTops.vue'
export default {
  data() {
    return {}
  },
  mounted() {},
  computed: {},
  methods: {},
  components: { backTops },
}
</script>
<style lang="scss" scoped></style>

子组件中的数据

<template>
  <div id="top">
    <p v-for="item in 200" :key="item">{{ item }}</p>
    <div @click="goTop" class="gotop" v-if="btnFlag">
      点我回到顶部
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return { btnFlag: true }
  },
  created() {},
  methods: {
    //点击返回顶部
    goTop() {
      //创建一个计时器
      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

        console.log('距离顶部的位置', ispeed)
        console.log('当前元素的和当前页面体的位置', osTop)
        if (ispeed === 0) {
          clearInterval(timer)
        }
      }, 30)
    },
  },
}
</script>

<style scoped lang="scss">
#top {
  width: 100%;
  // border: 1px solid red;
  p {
    text-align: center;
  }
  .gotop {
    width: 40px;
    height: 40px;
    bottom: 10%;
    right: 5%;
    border: 1px solid #eee;
    position: fixed;
    text-align: center;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>