vue 让元素回到顶部

vue 让元素回到顶部

在切换路由时，我们需要让页面回到顶部，有以下几种方式：

一、router

在router中

// 回到顶部
router.afterEach((to, from, next) => {
    window.scrollTo(0, 0);
})

二、滚动条不在body上

例如：

<template>
    <!--.wrap-box元素固定高度，内容溢出时，该元素纵向滚动-->
    <div class="wrap-box" ref="scollElement">
        <!--.box元素超出父元素.wrap-box高度时，页面会出现滚动条（滚动元素为.wrap-box）-->
        <div class="box">
            <!--内容区(切换不同模块)-->
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default{
        name:'warp-box',
        updated () {    // 切换不同模块时触发
          this.$nextTick(()=>{
              if(this.$refs.scollElement){    // 滚动元素跳转到顶部
                  this.$refs.scollElement.scrollTop = 0;
              }
          })
          }
    }
</script>

<style>
    .wrap-box{
        height: 200px;
        overflow-y: scroll;
    }
</style>