vue切换页面(路由)时如何保持滚动条回到顶部
作者:牛先森家的牛奶
这篇文章主要介绍了vue 切换页面(路由)时如何保持滚动条回到顶部问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
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(); })
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。