vue 回到顶部

最新推荐文章于 2024-03-20 09:42:58 发布

村里的大鹅

最新推荐文章于 2024-03-20 09:42:58 发布

阅读量144

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_49302285/article/details/125344551

版权

1.当内容太多时出现回到顶部按钮，先监听

  mounted() {
    window.addEventListener('scroll', this.scrollToTop)
 
  },
  destroyed() {
    window.removeEventListener('scroll', this.scrollToTop)
  },

2.显示

   scrollToTop() {
      // console.log('调用了')
      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
      }
    },

3.点击回到顶部

  //回到顶部
    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)
    },