返回顶部按钮,动画效果

388 阅读1分钟
 // 点击图片回到顶部方法,加计时器是为了过渡顺滑
    backTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop
      let seep = top / 30;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= seep
        if (top <= 0) {
          clearInterval(timeTop)
        }
      }, 10)

    },

    // 为了计算距离顶部的高度,当高度大于60显示回顶部图标,小于60则隐藏
    scrollToTops() {
      let scrolltop = Math.floor(document.documentElement.scrollTop || document.body.scrollTop)
      scrolltop > 60 ? this.btnFlag = true : this.btnFlag = false
    }