JavaScript——vue切换路由滚动条恢复到顶部

最新推荐文章于 2023-01-18 09:42:10 发布
最新推荐文章于 2023-01-18 09:42:10 发布
阅读量3.2k 收藏 2
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 遇到过的问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42269433/article/details/81541628
本文介绍了解决Vue单页面应用中路由切换后滚动条位置保持不变的问题，通过在路由变化后将滚动条置顶来确保每个页面的初始状态一致。

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

问题描述：vue是单页面应用。导致路由切换之后，之前的滚动距离会一直存在。然后会影响下一个页面的页面样式。

问题解决：

router.afterEach((to,from,next) => {

  window.scrollTo(0,0);

});

vue切换路由的时候，如何让右侧滚动条滚动到顶部呢？
猿小白的博客
02-06 7495
使用vue切换页面的时候，发现右侧的滚动条的位置似乎存在缓存似的，当右侧滚动条默认在顶部，切换页面的时候，位置停留在顶部，但当右侧滚动条的停留位置不是在顶部的时候，右侧滚动条停留的位置就会是上一个页面右侧滚动条停留的位置，因此，需要寻找一种方法解决这个问题。 下面是解决办法，只需要在router/index.is 里面增加一个scrollBehavior函数，并且指定对应位置即可，x=0,y=0时，默认为顶部，当然你想要设置为其它的位置也是可行的，具体改变对应的x和y的值即可。 // router..
vue路由滚动行为
Sunshine_Jian的博客
07-17 583
由于vue是单页面开发，组件跳转采用的是a标签的锚点逻辑，跳转之后，没有刷新页面，导致，在a页面的滚动条状态会保留到跳转到b页面的时候。 const router = new VueRouter({ routes, scrollBehavior(){ //函数拥有 to和from参数 //可以通过 return {x:0,y:0} 来控制滚动条 //console.log(arguments) return ...
vue中切换页面时让目标页面的滚动条自动滚动到顶部的方法
qq_52177667的博客
02-21 5724
问题：单页面跳转如：A页面滚动条滚动后再跳转B页面，在B页面滚动条还是在A页面滚动时的位置 解决办法(针对单个页面这个问题的) // 在/b页面, vue的mounted方法中, 写设置页面滚动条的这个方法 mounted() { // 切换页面时滚动条自动滚动到顶部 window.scrollTo(0,0); } 针对全部页面的话, 可以在路由的钩子函数中设置(main.js中)、 // 这个方法我没有亲测, 是查网上资料的, 不过我觉得, 放在`router.beforeEach`
vue 切换路由页面时，滚动条滚动到最上面
xingchen678的博客
01-18 4599
vue项目里，使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。可以在路由的导航守卫afterEach里面添加：window.scrollTo(0,0);scrollBehavior: () => ({ y: 0 }), //滚动到顶端。mode: ‘history 或 hash’,第三种方法： （本人用得方法）
vue路由跳转页面滚动到顶部
qq_45723621的博客
10-14 2422
注意: 这个功能只在支持 history.pushState 的浏览器中可用。今日一句： 遇见问题不要慌抽根烟，看官网。
利用vue2.0的导航钩子实现移动端路由跳转时让滚动条回到顶部
guoyiq的博客
02-23 2226
简单了解导航钩子vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // do something next(); ...
vue项目，路由跳转页面后滚动条自动回到顶部
weixin_42349568的博客
06-03 5208
一，现象 假设有两个页面，A和B。 当A页面很长时，我们在访问A页面时滚动条滚动到底部，这时候跳转到B页面，滚动条将不会变动，也就是B页面的滚动条还是在底部 二，原因 因为我们使用vue开发项目时，通常是使用vue-router路由来完成页面的跳转，而通常页面的布局如下分为header,aside，main,footer等部分，我们路由跳转只是不断地切换main中的内容罢了。 按f12查看，就可以看到，滚动条实际上是document.body上面的，也就是说，我们路由跳转时，滚动条压根就不受影响。所以才会
vue路由切换浏览器滚动条回到顶部
z750467878的博客
10-09 567
vue路由切换，浏览器滚动条回到顶部
详情页返回列表页恢复滚动位置
weixin_30708329的博客
01-29 164
1.sessionStorage/localStorage记录scrollTop，返回时恢复位置 2.单页的话，可以切换元素的显隐性，不做跳转 3.有滚动分页的话，可以记录页码pageIndex和滚动位置scrollTop，返回时恢复页码和滚动位置 4.vue的滚动恢复 a.记录滚动位置的方法 1.使用vue的keep-alive缓存页面2.在页面的activated生命周期中...
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
boy火巨的博客
05-16 6519
在网上查了一下，网友说还可以试试在main.js入口文件配合vue-router写这个router.afterEach((to,from,next) => {  window.scrollTo(0,0);});原文连接：http://www.jb51.net/article/129270.htm...
Vue页面滚动条复原问题
weixin_43078608的博客
07-17 4493
解决Vue单页面滚动条问题 今天工作时遇到了一个问题，Vue页面切换时，滚动条维持在前一个页面的状态，也就是滚动条没有归零。其实这个问题在Vue路由跳转时解决了这个问题。在activated钩子函数中将滚动条清零就可以了。 let dom = document.getElementById(id); if (dom != null) { if (dom.scr...
js 重置滚动条到顶部
zona
09-01 6080
滚动条在id=content的元素上 document.getElementsById('content').scrollTop = 0;
[Vue] 路由切换后页面滚动位置不变的解决方法
cargelzhong的博客
08-29 6865
vue切换路由，$router.push的时候页面到顶端的滚动距离仍会保持不变。 解决办法很简单，如下，直接监测watch路由变化，然后将body的滚动距离scrollTop赋值为0。 1 2 3 4 5 6 7 8 export default {   watch:{    '$route'...
vue 跳转页面后回到滚动条顶部
ZoeLinJF的博客
08-16 2340
在路由router.js中加上： scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } }, 之前跳转一直没用，最后排查发现给#app这个元素加了 height: 100%。因为页面是超出100%的，所以我改成了min-height: 100%，跳转后滚动条就回到顶部了 ...
vue-router嵌套路由，默认子路由设置
热门推荐
张营的技术博客
05-17 4万+
需求： 1. 底部5个tab选项卡 2. 其中一个里面又有tab选项卡 3. 显示active状态 4. 底部选项卡和子路由的选项卡都默认选择第一个选项卡 举个栗子： 示例是随便写的。 1.路由文件 router/index.js import Vue from 'vue' import Router from 'vue-router' import Home from...
vue项目重置滚动条得位置
lyxgoodLucky的博客
07-29 2684
在router.js里设置导航守卫： // 重置页面滚动条位置 router.afterEach((to, from, next) => { window.scrollTo(0, 0) })
vue路由切换时内容组件的滚动条回到顶部
weixin_30925411的博客
07-31 770
在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置，要切换路由的时候滚动条回到顶部才有更好的用户体验 1、当页面整体都要滚动到顶部的情况 router.afterEach(() => { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; }） 2、当页面中的...
vue vue-router路由跳转后滚动条自动滚动到顶部
淳于晗歌的博客
06-02 4952
我们在写路由跳转的时候，通常会希望界面跳转后显示为滚动条滚动到我们想要的位置（顶部），一般使用Window.scrollTo() 方法，其语法为： window.scrollTo(xpos, ypos) xpos：必需。要在窗口文档显示区左上角显示的文档的 x 坐标。 ypos：必需。要在窗口文档显示区左上角显示的文档的 y 坐标。 例如滚动内容的坐标位置100,500： window.scrollTo(100,500); 这个scrollTop这儿只是简单说一下，下面我们来看下vue-ro
vue路由切换滚动到页面顶部
cclidagou的博客
06-28 492
//使用路由进行控制 scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } } //使用window进行控制 m...
vue中滚动条回到顶部
最新发布
12-31
具体来说，在每次切换路由时重置窗口的 `scrollTop` 属性可以达到让页面滚动条自动回到顶部的效果。 对于单页应用 (SPA)，Vue Router 提供了一个全局钩子函数用于处理每一次成功的导航操作： ```javascript // ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值