vue中实现回到顶部功能

最新推荐文章于 2024-07-29 11:24:35 发布

代码修整工

最新推荐文章于 2024-07-29 11:24:35 发布

阅读量876

点赞数

分类专栏： Vue

原文链接：https://blog.csdn.net/qq_36070288/article/details/84765139

版权

Vue 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

<img v-if="btnFlag" class="go-top" src="图片url" @click="backTop">


data () {
    return {
      scrollTop: 0
    }
  }
// vue的两个生命钩子，这里不多解释。
// window对象，所有浏览器都支持window对象。它表示浏览器窗口，监听滚动事件
mounted () {
  window.addEventListener('scroll', this.scrollToTop)
},
destroyed () {
  window.removeEventListener('scroll', this.scrollToTop)
},
 
 
methods: {
  // 点击图片回到顶部方法，加计时器是为了过渡顺滑
  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)
  },
 
  // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
  scrollToTop () {
    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
    }
  }
}