vue 跳转页面后回到滚动条顶部

最新推荐文章于 2025-04-22 22:54:01 发布
原创 最新推荐文章于 2025-04-22 22:54:01 发布 · 2.3k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种在Vue.js项目中解决路由跳转后滚动条未返回顶部的问题的方法。通过调整#app元素的样式，从height:100%改为min-height:100%，并设置scrollBehavior来确保每次路由跳转后页面都能回到顶部。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在路由router.js中加上：

scrollBehavior (to, from, savedPosition) {
	return { x: 0, y: 0 }
},

之前跳转一直没用，最后排查发现给#app这个元素加了 height: 100%。因为页面是超出100%的，所以我改成了min-height: 100%，跳转后滚动条就回到顶部了

vue页面跳转后返回原页面初始位置方法
08-28
下面小编就为大家分享一篇vue页面跳转后返回原页面初始位置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue router 跳转后回到顶部的实例
10-18
为了解决这一问题，我们需要在Vue Router的跳转后执行特定的操作，以确保每次页面跳转后用户能够回到页面的顶部。这可以通过在Vue Router的导航守卫（Navigation Guards）中的afterEach钩子函数实现。 首先，我们来...
vue实现页面跳转时回滚到页面顶部
YanGo的博客
05-06 750
直接在main.js添加下面代码即可 router.afterEach((to, from, next) => { window.scrollTo(0, 0) })
Vue SPA 导航后无法滚动到顶部？罪魁祸首可能不是 `window`！
最新发布
qq_45161108的博客
04-22 804
在处理 SPA 中的滚动问题时，不能理所当然地认为滚动总是由window控制。现代前端应用中，为了实现复杂的布局（如固定的头部/侧边栏，内容区域滚动），常常会自定义滚动容器。关键在于：找到是哪个元素设置了或，并且它的尺寸被限制了（例如height或max-height确定这个元素的id或class。对于 Vue 应用，Vue Router 的是处理导航滚动的最佳场所。在使用找到你的滚动容器，并直接修改它的scrollTop属性。使用nextTick或setTimeout。
解决vue页面跳转后返回原页面顶部位置
艾丽的博客
05-14 1976
要解决问题如下图所示: 解决思路： 当前页面加载完之后（mounted），添加对滚动（scroll）事件的监听； 编写获取当前页面滚动高度的方法，并且将获取的当前页面滚动高度进行本地存储（localStorage）； 当切换不同子菜单项时候，获取本地存储里面存储的当前页面滚动高度，并且让其滚动到当前位置； 当前页面销毁时（destroyed），移除对滚动事件的监听，并且清空本地存储。 具体解决代码如下： mounted() { window.addEventListener('scroll', thi
vue项目，路由跳转页面后滚动条自动回到顶部
weixin_42349568的博客
06-03 5194
一，现象 假设有两个页面，A和B。 当A页面很长时，我们在访问A页面时滚动条滚动到底部，这时候跳转到B页面，滚动条将不会变动，也就是B页面的滚动条还是在底部 二，原因 因为我们使用vue开发项目时，通常是使用vue-router路由来完成页面的跳转，而通常页面的布局如下分为header,aside，main,footer等部分，我们路由跳转只是不断地切换main中的内容罢了。 按f12查看，就可以看到，滚动条实际上是document.body上面的，也就是说，我们路由跳转时，滚动条压根就不受影响。所以才会
vue 监听scroll事件 进入另一页面后，返回时保持在原来位置
Kris的博客
01-05 2928
在项目中，比如首页较长是需要scroll的，进入到另一页面后，返回时默认在首页原来的位置 思路： 这个主要是vue监听滚动事件，监听到进入之前的滚动条并保存下来，切换回来时再取出来进行赋值就可以了。 步骤： 1）利用vue的@scroll事件对整个页面进行监听 2）保存滚动条的值用的是sessionstorage，这个最合适了，又能暂存下来，又可以随着浏览器的 关闭而清除掉 3）最后就是用钩子...
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
08-28
在Vue项目中，当使用vue-router进行页面切换时，我们经常需要实现滚动条自动滚动到顶部的效果，以提供用户友好的导航体验。这通常通过利用`Window.scrollTo()`方法来完成，该方法允许我们指定页面滚动到的精确位置。...
vue2.0路由切换后页面滚动位置不变BUG的解决方法
08-27
在路由跳转时，Vue 会将页面滚动到顶部，这是因为 Vue 的路由机制会将页面滚动到顶部，而不是保持之前的滚动位置。 Watch 机制 在 Vue 中，watch 机制是一个非常重要的机制，用于监测数据的变化。当数据变化时，...
vue页面切换到滚动页面显示顶部的实例
11-28
为改善这种情况，可以添加一个加载遮罩层和加载动画，当数据正在加载或页面正在初始化时，展示遮罩层和加载动画，直到页面完全加载并定位到顶部后再移除。 五、登录拦截器的实现： 在Vue应用中，有时我们需要在用户...
vue返回上一页面时回到原先滚动的位置的方法
10-17
本文就如何在使用Vue.js开发的应用中实现返回上一页面时回到之前滚动位置的方法进行了详细介绍。 Vue.js中，可以利用内置的组件来缓存动态组件的实例，从而避免组件重新渲染时重新加载数据、初始化。首先，在App....
vue 列表内容详情返回定位&返回顶部
Zhang_h_的博客
07-16 1789
<jk-back-top v-if="isShowBack" :scrollTop="scrollTop"></jk-back-top> <md-scroll-view class="scroll" ref="scrollView" v-show="!isNoData" :scrolling-y="true" :scrolling-x="false" :auto-reflow="autoReflow" @scroll="onScroll" @endRea
vue页面中的一部分列表滚动条，在跳转页面后再回来，保持之前滚动条的位置状态
add-oil的博客
03-03 1135
类似下面的效果： 代码实现： beforeRouteLeave(to, from, next) { // main是包含列表的盒子容器类名 this.scrollTop = document.querySelector('.main').scrollTop next() }, beforeRouteEnter(to, from, next) { next(vm => { setTimeout(() => {//一开始进来页面未渲染无法拿到元素进行scro
vue3路由跳转后页面显示在上个页面滚动到的位置
Ama_Lee的博客
04-01 3708
问题描述 vue3路由跳转后页面显示在上个页面滚动到的位置 原因 vue中的路由跳转是不同组件的显示，尤其是我们在一个公共框架组件下的子组件，很有可能会存在页面显示位置有记忆的问题，vue-router官方文档给出了解决方案，链接如下： https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html 解决方案 在创建路由实例的时候添加scrollBehavior（滚动行为）函数，其接受三个参数，to和from路由对象以及savePositio
Vue路由跳转页面，滚动条的位置停留在上个页面的位置，没有回到顶部
jililin123的博客
08-09 1784
Vue路由跳转页面，滚动条的位置停留在上个页面的位置，没有回到顶部
Vue项目中实现页面滚动到顶部功能
qq_52569656的博客
09-28 5295
本文基于Vue2+element-ui技术栈，通过scrollTo方法实现页面滚动到顶部功能
vue中滚动条回到顶部的方法
热门推荐
JunVei的博客
09-22 1万+
【代码】vue中滚动条回到顶部的方法。
Nuxt.js 页面跳转后不会滚动至顶部，以及路由守卫应用
weixin_43990297的博客
11-10 7185
在做项目的过程中，遇到页面切换后不会滚动到顶部 解决方案： 在页面使用的layout中或者页面中，使用监听 watch: { '$route': function(to,from){ document.body.scrollTop = 0 document.documentElement.scrollTop = 0 this.$refs.scrol...
vue跳转滚动条返回顶部
合肥阿花的博客
10-20 3587
//窗口滚动条返回顶部 window.scrollTo(0,0); //组件父节点（&lt;div class="indexRight"&gt;）DIV滚动条返回顶部 this.$el.parentNode.scrollTop = 0;
vue重复跳转当前页面,滚动条位置没有改变
03-24
答案： 这可能是因为你使用了相同的路由导航跳转到当前页面。...请注意，在上面的代码片段中，我们使用了 `window.scrollTo` 方法来将滚动条位置重置为顶部。你需要根据你的需求来修改这个方法来满足你的具体需要。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值