router切换页面的时候滚动条怎样自动滚动到顶部

最新推荐文章于 2022-07-15 11:15:24 发布
最新推荐文章于 2022-07-15 11:15:24 发布
阅读量923 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端-VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_40292626/article/details/84346487

// router/index.is
const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
       return { x: 0, y: 0 }
  }})

vue切换路由的时候，如何让右侧滚动条滚动到顶部呢？
猿小白的博客
02-06 7495
使用vue切换页面的时候，发现右侧的滚动条的位置似乎存在缓存似的，当右侧滚动条默认在顶部，切换页面的时候，位置停留在顶部，但当右侧滚动条的停留位置不是在顶部的时候，右侧滚动条停留的位置就会是上一个页面右侧滚动条停留的位置，因此，需要寻找一种方法解决这个问题。 下面是解决办法，只需要在router/index.is 里面增加一个scrollBehavior函数，并且指定对应位置即可，x=0,y=0时，默认为顶部，当然你想要设置为其它的位置也是可行的，具体改变对应的x和y的值即可。 // router..
React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆
tzllxya的博客
05-29 2807
React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆 2018年12月17日更新： 修复在qq浏览器下执行pop跳转时页面错位问题 本文的代码已封装为npm包发布：react-slide-animation-router 在React Router中，想要做基于路由的左右滑动，我们首先得搞清楚当发生路由跳转的时候到底发生...
路由跳转的滚动方法
qq_42775934的博客
03-19 452
假如我们在一个页面中设置了window.addEventListener(‘scroll’, this.handleScroll)，那么当我们使用路由跳转到其他页面的时候，可能就会仍停留在原来的位置，什么意思呢， 就是我们在A页面中滑动到比如距离Top500px的距离，这个时候在A页面的500px地方有一个路由可以跳转到B页面，B页面设置了window.addEventListener(‘scro...
react-router-dom 路由切换页面跳转到顶部
夜近天溟的博客
09-12 3178
问题描述: 在react里使用路由跳转页面的时候, 如果页面不是在顶部, 那么在跳转完成以后, 页面是不会自动跳到顶部的。 如果用过Vue的朋友应该知道, Vue的Vue-router是有一个配置项, 可以监听路由跳转, 然后对滚动条做出自定义操作的: new Router({ scrollBehavior: ()=>({y:0}), // 用箭头函数返回一个对象, x表示...
react-reactscrollbarReact的滚动条组件
08-15
react-scrollbar - React的滚动条组件
vue中切换页面时让目标页面的滚动条自动滚动到顶部的方法
热门推荐
丁大聪明的博客
02-28 1万+
vue中切换页面时让目标页面的滚动条自动滚动到顶部的方法情景描述解决办法(针对单个页面这个问题的)针对全部页面的话, 可以在路由的钩子函数中设置(main.js中) 情景描述 页面 /a, 有输入框, 当输入框输入合适的值的时候, 不隐藏软键盘, 点击相应按钮直接跳到 /b 页面 /b, 页面本来内容很少, 没有滚动条的, 可是莫名的被下方的灰色区域顶到可视区上面, 内容被隐藏了一点, 但是...
页面出现滚动条后才出现的返回顶部代码
06-10
一个非常简单的html点击返回页面顶部特效，但又非常实用，代码简洁。简单而又实用的代码特效，是我们一直所追求的效果。 实用方法也简单，只要在head中调用js文件，并在body中调用html代码即可，不会产生冲突现象，兼容性良好
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
08-28
在Vue项目中，当使用vue-router进行页面切换时，我们经常需要实现滚动条自动滚动到顶部的效果，以提供用户友好的导航体验。这通常通过利用`Window.scrollTo()`方法来完成，该方法允许我们指定页面滚动到的精确位置。...
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
12-12
1、在每个需要用vue-router切换的组件的mounted钩子内将页面的位置自动回滚到页面顶部，解决滚动条位置自动记录问题； 2、在每个组件内定义一条变量scrollWatch默认为true，在绑定滚动监听事件时加个if判断，只有在...
react 点击分页滑动到页面顶部
qq_42207192的博客
01-25 620
//////方法: window.elGoTop = function (n) { document.querySelector(n) && document.querySelector(n).scrollTo({ top: 0, behavior: "smooth" }); } //////使用: //列表查询 async listPageEquipmentcategory() { const {pagin.
ListBox滚动条 刷新列表之后 指定位置(置顶或滚动到最后)
aaa002002的博客
05-23 1569
参数ObservableCollection<T>类型 滚动条在最上 ListBox.ScrollIntoView(ListBoxOC[0]);滚动条在最下 ListBox.ScrollIntoView(listBox.Items[listBox.Items.Count-1]) 转载于:https://www.cnblogs.com/Early-Bird/p/551...
vue切换页面滚动条置顶和点击按钮回到顶部
周金鱼啊
11-05 4492
切换页面滚动条置顶 vue使用的是单页面路由，所以切换页面的时候是不会进行刷新的，这时候就会导致滚动条在切换页面之后不会自动回到顶部。 我们可以使用vue中的router.afterEach这个钩子来解决这一问题 在main.js中新增如下代码就完美解决了 import router from './router'//引入路由 router.afterEach((to,from,nex...
页面跳转后滚动条置顶
qq_41728774的博客
12-05 1209
滑动滚动条后，再跳转页面，新页面绘制在此标签内的话，此时滚动条状态会被记录，不会重置。可能造成页面显示不全等问题。 选取滚动条所在标签，可以在OnInit或者AfterViewInit调用scrollTop等方法可以重置滚动条。 例如 $('.scrollable-container').scrollTop(0). 也可修改其属性例如$('.scrollable-contai...
vue 切换页面（路由）时保持滚动条回到顶部
牛先森家的博客
01-27 3217
vue 切换“页面”（路由）时保持滚动条回到顶部 vue项目做pc端的时候，发现在两个页面切换时 滚动条没有回到顶部而是保持原先的位置； 这是由于vue是单页面应用，只是更换了路由内容，还在当前页面滚动条是不会回到顶部的。 解决办法是在切换路由的时候，将滚动区域的滚动条复位为0。 // 使用 watch 监听$router的变化, watch: { '$route': function(to, from) { 　 document.body.scrollTop = 0 do
如何让select中的滚动条自动定位到框中选中项的位置
weixin_34321977的博客
01-29 1995
document.getElementById("hidScrollTop").value = document.getElementById("slcYZYongFa").scrollTop; select有个属性scrollTop可以跟据这个进行设置控件的滚动条垂直位置 这个用在有服务器事件提交时用，提交前保存scrollTop属性，页面加载时用上面的代码进行设置属性即可 当...
vue页面切换时滚动条会记录之前的位置
qq_41801484的博客
11-18 1691
前言 该问题最终是由页面过渡导致的，没有使用过渡效果的小伙伴应该是有其他原因，加油吧。。。。。 问题描述 A页面下拉到距离页面顶部200px位置处，然后切换到B页面， 结果滚动条依然在距离顶部200px处。 将在A页面的滚动条位置记录了下来。 寻找问题思路 因为在逻辑上并没有对页面做滚动行为相关的处理，所以首先排除业务代码的嫌疑， 那么问题很有可能就是在直接处理页面切换时造成的，暂时先将vue的过渡取消试一下 取消vue的过渡后 页面果然没有这个问题了，那么定位到了问题，这个问题就已经被修复了百分之五十了，
切换页面让滚动条回到顶部
weixin_44090040的博客
07-15 1315
切换页面让滚动条回到顶部。
vue-router 路由跳转滚动条置顶
最新发布
01-21
为了实现每次路由切换时页面滚动条自动回到顶部，在 `vue-router` 中有两种常用的方式：一种是通过全局前置守卫 `beforeEach` 方法来设置；另一种则是使用全局后置钩子 `afterEach` 来完成。 当采用 `router.before...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值