vue 切换页面滚动条始终在顶部

最新推荐文章于 2024-01-29 23:35:51 发布
最新推荐文章于 2024-01-29 23:35:51 发布
阅读量1.7k 收藏 1
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42949209/article/details/110976870
本文介绍了解决页面切换时滚动条位置记忆问题的方法。通过给出现滚动条的DOM元素添加ID选择器，并在每次切换菜单时将滚动条重置到顶部，从而避免了滚动条位置的不一致现象。

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

这个问题也是最近项目中遇到的问题

首先第一类是，数据是通过调接口获取到的，这种的话就非常简单了，因为每次点击菜单都会重新调用接口查询内容，这样的话，在调用接口前将数据赋值为空就可以了

第二类是，数据通过一次性接口获取到的，这样的话我们就得另寻他路了，从网上也找了很多的方法，但是都不是很清晰明确，我也把我的内容分享出来吧~

第一，我们要明确，出现滚动条的是哪一层DOM，给出现滚动条的DOM加一个id选择器

第二，在切换菜单时，一定会触发一个方法，去改变出现滚动条的数据，在这个数据获取到之前，将混动条置为顶部就可以啦

话不多说，贴代码

document.getElementById('articleId').scrollTop = 0;

在获取数据之前将上面的代码贴上去就可以啦，其中articleId为出现滚动条的id选择器的名称，其他的照搬就可以啦

设置完之后就可以实现啦

如果还有别的问题继续交流呀~

vue切换路由的时候，如何让右侧滚动条滚动到顶部呢？
猿小白的博客
02-06 7495
使用vue切换页面的时候，发现右侧的滚动条的位置似乎存在缓存似的，当右侧滚动条默认在顶部，切换页面的时候，位置停留在顶部，但当右侧滚动条的停留位置不是在顶部的时候，右侧滚动条停留的位置就会是上一个页面右侧滚动条停留的位置，因此，需要寻找一种方法解决这个问题。 下面是解决办法，只需要在router/index.is 里面增加一个scrollBehavior函数，并且指定对应位置即可，x=0,y=0时，默认为顶部，当然你想要设置为其它的位置也是可行的，具体改变对应的x和y的值即可。 // router..
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
08-28
主要介绍了vue项目中在使用vue-router切换页面的时候滚动条自动滚动到顶部的实现方法，一般使用Window scrollTo() 方法实现，本文给大家简单介绍了crollTop的使用,需要的朋友可以参考下
[转发]vue页面切换，滚动条始终固定在顶部
Homer_Simpson的博客
03-20 1054
转发 在使用vue脚手架做页面的时候，发现一个小bug…当你在一个页面的中间位置点击按钮进行组件跳转的时候，你会发现，你跳转到的新页面不是从顶部开始显示，而是在上一个页面点击按钮的位置显示在你视口的正中间，所以这就违背了我们网页开发的正常逻辑，针对以上发现的问题，我采取了一下解决办法，几行代码轻松搞定~话不多说，上代码： 1.methods里面直接写一个函数：（函数名随便叫） menu() { ...
vue切换页面滚动条置顶和点击按钮回到顶部
周金鱼啊
11-05 4489
切换页面滚动条置顶 vue使用的是单页面路由，所以切换页面的时候是不会进行刷新的，这时候就会导致滚动条在切换页面之后不会自动回到顶部。 我们可以使用vue中的router.afterEach这个钩子来解决这一问题 在main.js中新增如下代码就完美解决了 import router from './router'//引入路由 router.afterEach((to,from,nex...
vue中切换页面时让目标页面的滚动条自动滚动到顶部的方法
qq_52177667的博客
02-21 5724
问题：单页面跳转如：A页面滚动条滚动后再跳转B页面，在B页面滚动条还是在A页面滚动时的位置 解决办法(针对单个页面这个问题的) // 在/b页面, vue的mounted方法中, 写设置页面滚动条的这个方法 mounted() { // 切换页面时滚动条自动滚动到顶部 window.scrollTo(0,0); } 针对全部页面的话, 可以在路由的钩子函数中设置(main.js中)、 // 这个方法我没有亲测, 是查网上资料的, 不过我觉得, 放在`router.beforeEach`
vue 中滚动条滚动到顶部的相关处理
qq_34958474的博客
05-08 3057
1,如图所示，使用ElementUI 的table组件，在切换分页的时候滚动条需要自动滚动到最上方。 document.getElementsByClassName('el-table__body-wrapper is-scrolling-none')[0].scrollTop=0; 2,如图所示，使用ElementUI 的el-scrollbar 组件，在切换左边分组的时候需要右边子...
Vue跳转页面默认滚动到顶部（全网最详细）
weixin_74095707的博客
12-30 2327
Vue跳转页面默认滚动到顶部（全网最详细）
Vue项目中实现页面滚动到顶部功能
qq_52569656的博客
09-28 5336
本文基于Vue2+element-ui技术栈，通过scrollTo方法实现页面滚动到顶部功能
vue中页面跳转滚动条置顶
新技术革命
01-17 3663
1.vue单个页面跳转时： 在此页面上mounted方法中设置滚动条的方法 mounted() { // 切换页面时滚动条自动滚动到顶部 window.scrollTo(0,0); } router.afterEach((to,from,next) => { window.scrollTo(0,0); ...
elementUI与iview的table表格翻页后 滚动条置顶 / 回到第一行
ma_luping的博客
06-03 2238
封装的表格，最开始在网上找了答案，以我的这个表格设置成下面这样，试了没用 this.$refs.questionStorageitable.bodyWrapper.scrollTop =0; 最后试了下原生的这么设置才起作用 let overflowY = this.$el.getElementsByClassName("el-table__body-wrapper")[0]; if (!overflowY) { return; } overflowY.scrollTop...
Vue 2.0组件设计-滚动置顶
分享前端工程化、动效魔法与性能之舞！
04-27 1018
在前端开发中，滚动置顶是一个比较常见的交互设计，特别是在一些大型网站的首页，当内容篇幅较多时，在页面的底部或是侧边都会放置一个滚动置顶的图标，方便用户快速回到顶部。 滚动交互注意事项:1. 置顶图标在什么时候显示，什么时候消失；2. 滚动的过程要做缓冲动画处理，即滚动要速度要递减，才不能显的那么的突兀； 组件设计考虑因素:1. 组件要可以传参控制滚动置顶的位置；2. 组件要可以传参控制滚动置顶图标在什么时候显示；3.组件的滚动置顶图标最好支持传参自定义的样式；
vue 监听某个div垂直滚动条下拉到底部的方法
10-18
今天小编就为大家分享一篇vue 监听某个div垂直滚动条下拉到底部的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 切换路由页面时，滚动条滚动到最上面
xingchen678的博客
01-18 4598
vue项目里，使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。可以在路由的导航守卫afterEach里面添加：window.scrollTo(0,0);scrollBehavior: () => ({ y: 0 }), //滚动到顶端。mode: ‘history 或 hash’,第三种方法： （本人用得方法）
vue中滚动条回到顶部的方法
JunVei的博客
09-22 1万+
【代码】vue中滚动条回到顶部的方法。
一分钟教你如何用vue代码实现一键回到顶部
热门推荐
希望看完文章的你能够带着答案离开。
09-04 1万+
一分钟教你如何用vue代码实现一键回到顶部
vue3 keep-alive使用示例 解决切换页面滚动条不复位问题
最新发布
qq_27337003的博客
01-29 1584
vue3 keep-alive使用示例 解决切换页面滚动条不复位问题
解决vue elementUI 弹框Dialog 打开后滚条回到顶部
小猫爪子
05-11 3829
设置属性 <el-dialog :lock-scroll="false" :append-to-body="true" ></el-dialog >
VUE项目（单页面）问题之： 浏览器刷新，滚动条在顶部
yan263364的博客
11-30 2827
vue3 页面回到顶部（滚动效果）
weixin_44325341的博客
04-12 7070
要求：1.回到顶部按钮 动态出现 当往下滚动时出现 回到顶部时自动消失 2.动画过渡 不要太生硬 3.点击回到顶部后 滚回顶部 不可以一下子转到顶部 实现效果： 代码实现： html: <li :class="backTopFlag ? 'active' : 'inactive'" @click="backTop"> <i class="icon5"></i> &lt...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值