huangtaoya
侠客
侠客
  • 最后登录2020-03-26
  • 发帖数10
阅读:5698回复:0

[vue]VUE中返回页面顶部

楼主#
更多 发布于:2019-11-14 11:15
 data () {
  return {
    // 下滑到一定位置才显示按钮控件
    visible: false,
    scrollTop: 0
  }
},
// 获取屏幕高度
 mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
// 销毁时清空
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
    if (this.interval) {
      clearInterval(this.interval)
    }
  },
  methods: {
    backToTopFun () {
      let timer = setInterval(() => {
        let speed = Math.floor(-this.scrollTop / 10);
        document.documentElement.scrollTop = document.body.scrollTop = this.scrollTop + speed;
        if (this.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 20)
    },
    handleScroll () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      this.scrollTop = scrollTop;
      if (this.scrollTop > 100) {
        this.visible = true;
      } else {
        this.visible = false;
      }
    }
  }
[huangtaoya于2019-11-15 20:50编辑了帖子]

最新喜欢:

doubleyongdouble...
游客


返回顶部

公众号

公众号