YFYC-H5/src/components/BackTop.vue

<template>
  <div class="back-top" @click="onClickBackTop" v-show="isShowBackTopBtn">
    <slot>
      <div class="back-top__default">回到顶部</div>
    </slot>
  </div>
</template>

<script>
// const TWEEN = require('@tweenjs/tween.js')

export default({
  props: {
    targetId: {
      type: String,
      required: true,
    },
    triggerDistance: {
      type: Number,
      default: 200,
    }
  },
  data() {
    return {
      target: null,
      isShowBackTopBtn: false,
      isBackingTop: false,
    }
  },
  methods: {
    onClickBackTop() {
      if (this.isBackingTop) {
        return
      }
      this.isBackingTop = true

      // const tweenTarget = {
      //   scrollTop: this.target.scrollTop
      // }
      // new TWEEN.Tween(tweenTarget)
      //   .to({scrollTop: 0}, 800)
      //   .easing(TWEEN.Easing.Quartic.Out)
      //   .onUpdate(() => {
      //     this.target.scrollTop = tweenTarget.scrollTop
      //   })
      //   .onComplete(() => {
      //     this.isBackingTop = false
      //   })
      //   .start()
      
      // const animate = (time) => {
      //   if (this.isBackingTop) {
      //     requestAnimationFrame(animate)
      //     TWEEN.update(time)
      //   }
      // }
      // requestAnimationFrame(animate)

      // 不想引入tween.js的话，可以用这段简单的匀速滚动代码
      const startTime = Date.now()
      const totalScroll = this.target.scrollTop
      const fn = () => {
        if (this.target.scrollTop === 0) {
          this.isBackingTop = false
          return
        } 

        const nowTime = Date.now()
        const assumeScrollTop = totalScroll - (nowTime - startTime) * totalScroll / 500
        this.target.scrollTop = assumeScrollTop > 0 ? assumeScrollTop : 0
        requestAnimationFrame(fn)
      }
      requestAnimationFrame(fn)
    },
    onTargetScroll: globalUtils.debounce(function(e) {
      if (this.isBackingTop) {
        return
      }
      if (e.target.scrollTop >= this.triggerDistance) {
        this.isShowBackTopBtn = true
      } else {
        this.isShowBackTopBtn = false
      }
    }),
  },
  mounted() {
    this.target = document.getElementById(this.targetId)
    if (this.target) {
      this.target.addEventListener('scroll', this.onTargetScroll, {
        passive: true,
      })
    }
  },
  unmounted() {
    if (this.target) {
      this.target.removeEventListener('scroll', this.onTargetScroll, {
        passive: true,
      })
    }
  }
})
</script>

<style scoped lang="less">
.back-top__default {
  cursor: pointer;
}
</style>