vue切换页面(路由)时如何保持滚动条回到顶部

时间:2022-12-06 牛先森家的牛奶人气:0

vue切换“页面”(路由)时保持滚动条回到顶部

vue项目做pc端的时候，发现在两个页面切换时滚动条没有回到顶部而是保持原先的位置；

这是由于vue是单页面应用，只是更换了路由内容，还在当前页面滚动条是不会回到顶部的。

解决办法是在切换路由的时候，将滚动区域的滚动条复位为0。

  // 使用 watch 监听$router的变化,
  watch: {
    '$route': function(to, from) {
　    document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    }
  }

当然看页面的布局，可能滚动区域并不是document的scrollTop为0 能有效果，和项目里面的布局滚动区域有关，下面是项目里面的滚动区域 app-main ；

<template>
  <div id="app">
    <router-view />
    <!-- 骨架屏，在菜单组件触发隐藏，目前没想到又好的方式处理 -->
    <common-skeleton v-if="showSkeleton" />
  </div>
</template>

<script>
import CommonSkeleton from './components/Skeleton/common'

export default {
  name: 'App',
  components: {
    CommonSkeleton
  },
  computed: {
    showSkeleton() {
      return this.$store.state.settings.showSkeleton
    }
  },
  watch: {
    '$route'(val) {
      if (!document.getElementsByClassName('app-main') || !document.getElementsByClassName('app-main').length) {
        return
      }
      document.getElementsByClassName('app-main')[0].scrollTop = 0
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";
#app {
  width: 100%;
  height: 100%;
  @include clearfix;
}
</style>

vue页面跳转后，滚动条不在顶部的解决

问题描述

vue在将页面滚动到页面中部或者底部（反正不在顶部），再进行页面跳转后，新页面的滚动条还处于上一个页面的位置，并没有更新到页面顶部

解决方法

在全局路由钩子里面将页面滚动到页面顶部

router.beforeEach((to, from, next) => {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
 
    // 兼容IE
    window.scrollTo(0, 0);
    next();
})

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

加载全部内容