Vue 项目 backTop 点击回到顶部

场景: 点击回到顶部, 到达顶部backTop 隐藏, 有滚动 显示

Vue 项目 backTop 点击回到顶部_第1张图片

  mounted() {
    setTimeout(() => {
      this.showScrollTop =
        document.body.scrollTop + document.documentElement.scrollTop + document.body.clientHeight >
        document.body.clientHeight
      // this.showScrollTop = this.$parent.$el.offsetHeight > document.body.clientHeight
    }, 1000)
    window.addEventListener('scroll', this.backTop)
  },
  methods: {
    scrollTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    },
    backTop() {
      if (!!document.documentElement.scrollTop == 0) {
        this.showScrollTop = false
      } else {
        this.showScrollTop = true
      }
    }
  }

你可能感兴趣的:(JavaScript,backtop,vue)