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

最新推荐文章于 2024-04-16 14:30:42 发布
最新推荐文章于 2024-04-16 14:30:42 发布
阅读量3.1k 收藏 2
点赞数 2
分类专栏： 遇到过的问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42269433/article/details/81541628
版权

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

问题解决：

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

  window.scrollTo(0,0);

});

红烧金鱼草
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue - 页面缓存（keep-alive）让容器滚动条回到原来的位置，保存用户浏览位置（从详情页返回列表时发现滚动条位置回到了最顶部，并没有停留在进入详情页之前）
王佳斌
08-25 3226
Vue - 页面缓存（keep-alive）让容器滚动条回到原来的位置，保存用户浏览位置（从详情页返回列表时发现滚动条位置回到了最顶部，并没有停留在进入详情页之前），实现从详情返回列表,保持原先的滚动位置，vue使用keep-alive还原滚动位置的问题，nuxt.js项目页面缓存（keep-alive-props）回到指定滚动位置（从详情页返回列表时发现滚动条位置回到了最顶部，并没有停留在进入详情页之前），vue项目中keep-alive的使用,从详情页返回列表时保存浏览位， vue实现返回记住滚动位置，
vue页面切换到滚动页面显示顶部的实例
08-27
以上就是关于Vue页面切换到滚动页面显示顶部的实例及登录拦截器的实现。这些技巧对于提升用户体验至关重要，特别是在移动端应用中。通过理解并运用这些方法，你可以更好地控制Vue应用中的页面导航和交互效果。
解决vue-router跳转后元素内嵌滚动条自动回到顶部的问题。
wjlhanhan的博客
05-25 1265
该路由已经使用了缓存的前提下 <keep-alive> <router-view></router-view> </keep-alive> 当页面跳转，点击返回按钮后发现之前页面里的一个列表元素的滚动条自动回到顶部了，因为该元素设置了固定的宽高并且css设置overflow: scroll; 这样的话，滚动条不是页面级别的，并没有被记录下来，但是该组件又没有发生改变，所以封装个组件记录滚动条位置，页面发生改变就设置会以前的位置就行了。 自定义组件.
vue路由滚动行为
Sunshine_Jian的博客
07-17 517
由于vue是单页面开发，组件跳转采用的是a标签的锚点逻辑，跳转之后，没有刷新页面，导致，在a页面的滚动条状态会保留到跳转到b页面的时候。 const router = new VueRouter({ routes, scrollBehavior(){ //函数拥有 to和from参数 //可以通过 return {x:0,y:0} 来控制滚动条 //console.log(arguments) return ...
vue3滚动条重置
最新发布
lyna的博客
04-16 759
由于单页面应用的原理，使用vue搭建的项目在路由切换时并不会刷新整个页面。因此在有滚动条的页面会存在滚动条不能自动重置的问题。在最近的项目中就遇到了这种问题，因此记录一下。// 由于路由设置了0.3s过渡效果，所以此处设置了0.3s定时器。避免页面切换效果突兀。
vue项目实战--路由后置守卫afterEach解决页面滚动问题
梧桐落叶~~
06-28 908
问题描述 首页页面较长滚动了一定的位置，这时单击页面上的某个跳转按钮进行页面跳转，滚动条默认是上一个页面的停留的位置，影响用户体验。 解决问题 //路由配置文件 index.js router.afterEach((to, from, next) => { window.scrollTo(0, 0); }); document.body.scrollTop = 0 document.documentElement.scrollTop =0 本人在后置路由守卫设置的完全没有效果。经过一系
vue中切换页面时让目标页面的滚动条自动滚动到顶部的方法
qq_52177667的博客
02-21 5493
问题：单页面跳转如：A页面滚动条滚动后再跳转B页面，在B页面滚动条还是在A页面滚动时的位置 解决办法(针对单个页面这个问题的) // 在/b页面, vue的mounted方法中, 写设置页面滚动条的这个方法 mounted() { // 切换页面时滚动条自动滚动到顶部 window.scrollTo(0,0); } 针对全部页面的话, 可以在路由的钩子函数中设置(main.js中)、 // 这个方法我没有亲测, 是查网上资料的, 不过我觉得, 放在`router.beforeEach`
vue的路由滚动 切换路由之后滚动条在最上面
m0_64415782的博客
07-26 1229
如果你想自定义路由切换时的滚动行为，可以在路由配置中使用scrollBehavior函数。这个函数接收三个参数：to（目标路由对象），from（来源路由对象）和savedPosition（之前的滚动位置）。你可以根据这些参数来自定义滚动行为。在Vue中，你可以通过路由滚动行为来控制页面切换时滚动条的位置。默认情况下，Vue Router会将滚动条的位置重置为顶部。
解决vue单页路由跳转后scrollTop的问题
10-18
当从一个滚动的页面切换到另一个页面时，滚动条并没有重置到顶部，这可能会影响用户体验。本文将详细介绍如何解决Vue单页路由跳转后scrollTop的问题。 首先，这个问题通常是由于浏览器的默认行为导致的。当你通过...
vue使用keep-alive切换页面，2种方法实现页面保持滚动位置.zip
11-03
在Vue.js应用中，我们经常需要使用路由进行页面间的切换，但默认情况下，当用户从一个页面切换到另一个页面时，之前的页面状态会被重置，包括滚动位置。为了解决这个问题，Vue提供了一个名为`keep-alive`的组件，它...
详解10分钟学会vue滚动行为
08-29
在实际应用中，`scrollBehavior` 可以实现更多复杂的逻辑，比如根据路由的不同滚动到特定的位置，或者在某些路由切换时始终保持页面顶部。例如，你可能希望所有内部链接（如 `/foo` 和 `/bar`）都滚动到顶部，而带...
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
10-15
主要介绍了vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
10-16
在Vue项目中，有时我们可能会遇到用户进入页面时滚动条不在顶部的问题，这会影响用户体验，特别是当希望用户一进入页面就能看到完整内容时。本文主要探讨了如何解决这个问题以及如何实现一个滚动返回顶部的按钮。 ...
vue-router滚动行为
xm1037782843的博客
11-14 1384
vue路由-滚动行为
vue-router钩子函数实现路由守卫
瘦尾巴的胖头鱼
11-22 313
何为路由守卫？路由守卫有点类似于ajax的请求拦截器，就是请求发送之前先给你拦截住做一些事情之后再去发送请求，同样这里的路由守卫意思差不多；简单理解为就是你在进路由之前，首先把你拦住，对你进行检查；这是不是有点中学门口的保安？进来之前拦住，有学生证就进，没有学生证就不让进；当然，路由守卫不仅仅只是在你进入之前拦住你，还有其他的钩子函数进行其他操作； vue-router一共给我们提供了三大类钩子函数来实现路由守卫： 1、全局钩子函数（beforeEach、afterEach) 2、路由独享的钩子函数（
vue路由切换时内容组件的滚动条回到顶部
Macao7_W的博客
06-29 2653
vue路由切换时页面滚动到顶部
解决vue中路由跳转时，让滚动条显示在顶部
qq_56989560的博客
04-30 2602
解决vue中页面跳转，显示在顶部
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
wandoumm的博客
05-09 7875
有时候我们需要页面滚动条滚动到某一固定的位置，一般使用Window scrollTo() 方法。语法就是：scrollTo(xpos,ypos)xpos：必需。要在窗口文档显示区左上角显示的文档的 x 坐标。ypos：必需。要在窗口文档显示区左上角显示的文档的 y 坐标。例如滚动内容的坐标位置100,500：window.scrollTo(100,500);好了，这个scrollTop这儿只是简单...
vue路由跳转后执行滚动条初始化
qq_27851967的博客
08-29 2005
router.afterEach((to,from,next) =&gt; { window.scrollTo(0,0); });
vue,路由滚动行为回到顶部
09-06
在Vue中，可以通过路由的滚动行为来实现回到顶部的效果。在路由配置中，可以使用`scrollBehavior`属性来定义滚动行为。具体的步骤如下： 1. 打开Vue项目的路由配置文件（一般是`router/index.js`），创建一个`scrollBehavior`函数。 2. 在`scrollBehavior`函数中，判断路由的跳转行为是向上滚动还是向下滚动。 3. 如果是向上滚动，则将页面滚动到顶部；如果是向下滚动，则保持现有的滚动位置。 4. 最后，在路由配置文件的`export default new Router({})`中添加`scrollBehavior`属性并赋值为之前创建的`scrollBehavior`函数。 下面是一个示例代码： ```javascript // router/index.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const routes = [ // 路由配置 ] const router = new Router({ mode: 'history', routes, scrollBehavior(to, from, savedPosition) { if (savedPosition) { // 向下滚动，保持现有滚动位置 return savedPosition } else { // 向上滚动，滚动到页面顶部 return { x: 0, y: 0 } } } }) export default router ``` 通过以上步骤，Vue的路由滚动行为就会在跳转页面时自动回到顶部。当然，如果你不需要这样的滚动行为，可以将`scrollBehavior`函数留空或删除。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值