vue下返回顶部功能实现

2020-03-20213次阅读vue

vue下返回顶部功能实现,超过可视区域返回顶部按钮显示,否则隐藏。

<span v-if="btnFlag" class="go-top"  @click="backTop"></span>
data(){

    return {
        btnFlag:false

    }

},
// vue的两个生命钩子,这里不多解释。
// window对象,所有浏览器都支持window对象。它表示浏览器窗口,监听滚动事件
created () {
  window.addEventListener('scroll', this.scrollToTop)
},
destroyed () {
    window.removeEventListener('scroll',()=>{
        this.scrollToTop();
    });
}
 
 
methods: {
  // 点击返回顶部方法
  backTop () {
        window.scroll({
            top: 0, 
            left: 0, 
            behavior: 'smooth'
        });
  },
 
  scrollToTop () {
    // 计算浏览器视口高度,当高度大于浏览器视口显示回顶部按钮,小于则隐藏
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

    const h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

    if (scrollTop > h) {
        this.btnFlag = true;
    } else {
        this.btnFlag = false;
    }
  }
}

这里返回顶部使用了javascript平滑滚动Element.scrollIntoView()

上一篇: vscode折叠/展开所有区域代码快捷键  下一篇: css3展开收起导航动画  

vue下返回顶部功能实现相关文章