vue 返回顶部动画效果

vue 返回顶部动画效果

小程序、前端交流群：609690978

  methods: {
    // 监听页面滚动
    scrollToTop() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      this.showTopTimer && clearTimeout(this.showTopTimer)
      this.showTopTimer = setTimeout(() => {
        this.handleScrollEnd()
      }, 300)
      this.currentTop = scrollTop
      this.showTop = false
    },
    // 停止滚动时触发
    handleScrollEnd() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop === this.currentTop && scrollTop > document.documentElement.clientHeight) {
        this.showTop = true
        clearTimeout(this.showTopTimer)
      }
    },
    // 返回顶部动画效果
    toTop() {
      var u = navigator.userAgent
      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 //android终端
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // 实现滚动效果
      let speed = scrollTop / 10 // 每次滚动多少 （步长值）
      const timeTop = setInterval(() => {
        if (isIOS) {
			if (document.documentElement.scrollTop !== 0) {
	          document.documentElement.scrollTop -= speed // 不在顶部 每次滚动到的位置
	        } else {
	          clearInterval(timeTop) // 回到顶部清除定时器
	        }
        }
        if (isAndroid) {
          if (document.body.scrollTop != 0) {
            document.body.scrollTop -= speed
          } else {
            clearInterval(timeTop)
          }
        }
      }, 20)
    },
  },
  // 退出页面时取消监听
  beforeDestroy() {
    window.removeEventListener('scroll', this.scrollToTop)
  }