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

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

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

在路由router.js中加上：

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

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

vue页面中的一部分列表滚动条，在跳转页面后再回来，保持之前滚动条的位置状态
add-oil的博客
03-03 1182
类似下面的效果： 代码实现： beforeRouteLeave(to, from, next) { // main是包含列表的盒子容器类名 this.scrollTop = document.querySelector('.main').scrollTop next() }, beforeRouteEnter(to, from, next) { next(vm => { setTimeout(() => {//一开始进来页面未渲染无法拿到元素进行scro
vue页面跳转后返回原页面初始位置方法
08-28
下面小编就为大家分享一篇vue页面跳转后返回原页面初始位置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue实现页面跳转时回滚到页面顶部
YanGo的博客
05-06 767
直接在main.js添加下面代码即可 router.afterEach((to, from, next) => { window.scrollTo(0, 0) })
解决vue页面跳转后返回原页面顶部位置
艾丽的博客
05-14 2002
要解决问题如下图所示: 解决思路： 当前页面加载完之后（mounted），添加对滚动（scroll）事件的监听； 编写获取当前页面滚动高度的方法，并且将获取的当前页面滚动高度进行本地存储（localStorage）； 当切换不同子菜单项时候，获取本地存储里面存储的当前页面滚动高度，并且让其滚动到当前位置； 当前页面销毁时（destroyed），移除对滚动事件的监听，并且清空本地存储。 具体解决代码如下： mounted() { window.addEventListener('scroll', thi
vue项目，路由跳转页面后滚动条自动回到顶部
weixin_42349568的博客
06-03 5334
一，现象 假设有两个页面，A和B。 当A页面很长时，我们在访问A页面时滚动条滚动到底部，这时候跳转到B页面，滚动条将不会变动，也就是B页面的滚动条还是在底部 二，原因 因为我们使用vue开发项目时，通常是使用vue-router路由来完成页面的跳转，而通常页面的布局如下分为header,aside，main,footer等部分，我们路由跳转只是不断地切换main中的内容罢了。 按f12查看，就可以看到，滚动条实际上是document.body上面的，也就是说，我们路由跳转时，滚动条压根就不受影响。所以才会
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
08-28
在Vue项目中，当使用vue-router进行页面切换时，我们经常需要实现滚动条自动滚动到顶部的效果，以提供用户友好的导航体验。这通常通过利用`Window.scrollTo()`方法来完成，该方法允许我们指定页面滚动到的精确位置。...
vue router 跳转后回到顶部的实例
10-18
为了解决这一问题，我们需要在Vue Router的跳转后执行特定的操作，以确保每次页面跳转后用户能够回到页面的顶部。这可以通过在Vue Router的导航守卫（Navigation Guards）中的afterEach钩子函数实现。 首先，我们来...
vue2.0路由切换后页面滚动位置不变BUG的解决方法
08-27
在路由跳转时，Vue 会将页面滚动到顶部，这是因为 Vue 的路由机制会将页面滚动到顶部，而不是保持之前的滚动位置。 Watch 机制 在 Vue 中，watch 机制是一个非常重要的机制，用于监测数据的变化。当数据变化时，...
vue页面切换到滚动页面显示顶部的实例
11-28
为改善这种情况，可以添加一个加载遮罩层和加载动画，当数据正在加载或页面正在初始化时，展示遮罩层和加载动画，直到页面完全加载并定位到顶部后再移除。 五、登录拦截器的实现： 在Vue应用中，有时我们需要在用户...
vue返回上一页面时回到原先滚动的位置的方法
10-17
本文就如何在使用Vue.js开发的应用中实现返回上一页面时回到之前滚动位置的方法进行了详细介绍。 Vue.js中，可以利用内置的组件来缓存动态组件的实例，从而避免组件重新渲染时重新加载数据、初始化。首先，在App....
vue 监听scroll事件 进入另一页面后，返回时保持在原来位置
Kris的博客
01-05 2979
在项目中，比如首页较长是需要scroll的，进入到另一页面后，返回时默认在首页原来的位置 思路： 这个主要是vue监听滚动事件，监听到进入之前的滚动条并保存下来，切换回来时再取出来进行赋值就可以了。 步骤： 1）利用vue的@scroll事件对整个页面进行监听 2）保存滚动条的值用的是sessionstorage，这个最合适了，又能暂存下来，又可以随着浏览器的 关闭而清除掉 3）最后就是用钩子...
vue 列表内容详情返回定位&返回顶部
Zhang_h_的博客
07-16 1831
<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
vue3路由跳转后页面显示在上个页面滚动到的位置
Ama_Lee的博客
04-01 3810
问题描述 vue3路由跳转后页面显示在上个页面滚动到的位置 原因 vue中的路由跳转是不同组件的显示，尤其是我们在一个公共框架组件下的子组件，很有可能会存在页面显示位置有记忆的问题，vue-router官方文档给出了解决方案，链接如下： https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html 解决方案 在创建路由实例的时候添加scrollBehavior（滚动行为）函数，其接受三个参数，to和from路由对象以及savePositio
Vue路由跳转页面，滚动条的位置停留在上个页面的位置，没有回到顶部
jililin123的博客
08-09 1853
Vue路由跳转页面，滚动条的位置停留在上个页面的位置，没有回到顶部
Vue项目中实现页面滚动到顶部功能
qq_52569656的博客
09-28 5525
本文基于Vue2+element-ui技术栈，通过scrollTo方法实现页面滚动到顶部功能
vue中页面跳转滚动条置顶（总结）
个人博客 https://pnkx.top
03-17 5913
1.vue单个页面跳转时： 在此页面上mounted方法中设置滚动条的方法 mounted() { //&nbsp;切换页面时滚动条自动滚动到顶部 window.scrollTo(0,0); } 2.全部页面，使用路由的钩子函数中设置(在router中main.js) router.afterEach((to,from,next) => { window.scr...
vue项目实现回到顶部的两种超简单方法
热门推荐
sinat_33255495的博客
03-29 2万+
vue 中实现回到顶部的两种方式： （1）锚点方式 通过点击锚点回到指定位置： <template> <div id="topAnchor" ref="faultTree" class="wrap"> <a id="TOPUp" href="#topAnchor"> <img style="width: 100%;height: 100%;" src="../../../../assets/top.png" alt="">
vue 切换“页面”（路由）时保持滚动条回到顶部
Kris的博客
12-25 6217
vue项目做pc端的时候，发现在两个页面切换时 滚动条没有回到顶部而是保持原先的位置，这是由于vue是单页面应用，只是更换了路由内容，还在当前页面滚动条是不会回到顶部的。 解决办法是在切换路由的时候，将滚动条复位为0。 在App.vue文件下，添加watch事件，全局监听路由，亲测有效。 components:{ publicTop, publicFooter, }, // 使用watch 监听K...
vue 页面跳转新页面未回到顶部
最新发布
05-24
### Vue 页面跳转后滚动位置回到顶部的解决方案 在 Vue 中，当通过 `vue-router` 进行页面跳转时，默认情况下不会重置滚动条的位置。这可能导致新页面加载后仍然保留之前页面的滚动状态。以下是几种常见的解决方法...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值