vue切换页面(路由)时如何保持滚动条回到顶部
作者:牛先森家的牛奶 时间:2024-05-28 15:54:49
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();
})
来源:https://blog.csdn.net/weixin_42681295/article/details/122712710
标签:vue,切换页面,滚动条,顶部
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python利用pywin32实现自动操作电脑
2024-01-03 03:35:59
![](https://img.aspxhome.com/file/2023/3/110253_0s.gif)
停止事件冒泡和阻止浏览器默认行为的脚本
2008-09-09 22:09:00
Pandas 数据处理,数据清洗详解
2022-05-23 16:04:23
ASP缓存类 【先锋缓存类】Ver2004
2009-01-05 12:28:00
Python代码实现删除一个list里面重复元素的方法
2022-06-02 15:31:02
PHP简易延时队列的实现流程详解
2023-05-29 23:02:48
vs10安装之后一些列问题
2024-01-29 11:59:48
Python利用正则表达式匹配并截取指定子串及去重的方法
2021-05-07 00:37:20
从0到1构建vueSSR项目之路由的构建
2024-05-09 09:52:33
Python实现企业微信通知机器人的方法详解
2021-03-12 09:56:02
![](https://img.aspxhome.com/file/2023/9/78629_0s.png)
浅谈Go语言的error类型
2024-05-10 13:57:58
详解Oracle 中实现数据透视表的几种方法
2023-07-24 03:45:04
go语言开发中如何优雅得关闭协程方法
2024-02-15 00:12:55
asp HTTP_X_FORWARDED_FOR和REMOTE_ADDR
2010-07-02 12:33:00
Python数据可视化详解
2021-10-02 19:28:55
![](https://img.aspxhome.com/file/2023/8/78498_0s.jpg)
MySQL慢sql优化思路详细讲解
2024-01-18 03:51:43
![](https://img.aspxhome.com/file/2023/5/66145_0s.png)
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2022-05-22 21:51:51
多级联动下拉选择框,动态获取下一级
2008-09-04 10:34:00
使用Python编写Linux系统守护进程实例
2022-06-09 16:50:52
python使用requests.session模拟登录
2022-09-12 19:17:24
![](https://img.aspxhome.com/file/2023/1/95301_0s.png)