nuxtProject/components/sidebar.vue

<template>
  <div class="client-sidebar">
      <ul>
          <li><a><i></i></a></li>
          <li><i @click="backTop"></i></li>
      </ul>
  </div>
</template>

<script>
    export default {
        name: 'mtaSidebar',
      // vue的两个生命钩子，这里不多解释。
// window对象，所有浏览器都支持window对象。它表示浏览器窗口，监听滚动事件
      mounted () {
        window.addEventListener('scroll', this.scrollToTop)
      },
      destroyed () {
        window.removeEventListener('scroll', this.scrollToTop)
      },


      methods: {
        // 点击图片回到顶部方法，加计时器是为了过渡顺滑
        backTop() {
          const that = this
          let timer = setInterval(() => {
            let ispeed = Math.floor(-that.scrollTop / 5)
            document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
            if (that.scrollTop === 0) {
              clearInterval(timer)
            }
          }, 16)
        },

        // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
        scrollToTop() {
          const that = this
          let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
          that.scrollTop = scrollTop
          if (that.scrollTop > 60) {
            that.btnFlag = true
          } else {
            that.btnFlag = false
          }
        }
      }
      };
</script>

<style lang="scss" scoped>
.client-sidebar{
  display: none;
    position: fixed;
    z-index: 100;
    top: 220px;
    right: 0;
    i{width: 50px;height: 50px;display: block;}
    li:nth-child(1) i{background: pink;}
    li:nth-child(2) i{background: green;}
}
</style>