vue实现页面跳转时回滚到页面顶部

最新推荐文章于 2023-09-28 10:46:09 发布
最新推荐文章于 2023-09-28 10:46:09 发布
阅读量732 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39644462/article/details/105951407
版权
直接在main.js添加下面代码即可
router.afterEach((to, from, next) => {
  window.scrollTo(0, 0)
})
攻城狮YanGo
关注
专栏目录
vue 点击路由跳转（地址重复）报错以及路由跳转滚动条未回滚到顶部问题
郝峰vip的博客
12-08 627
前言 最近在用vue-cli4 , vue3.0开发项目时，遇到了路由跳转时当点击同一个路由地址时就会报错，另一个问题就是路由跳转后记住了上一次页面的滚动条的位置，未回滚到顶部。 step 一，路由跳转时当点击同一个路由地址(也就是路由地址重复)时就会报错,或者刷新报错 main.js import Router from 'vue-router' const routerPush = Router.prototype.push Router.prototype.push = function pu
vue element - ui 项目， scrollbar模块，切换页面不置顶
Shimeng_1989的博客
10-24 1188
我们项目为vue项目，整个html是分为三个区域 上、下、（下面部分包含：）左、右。 问题为：点击左侧菜单，切换路由，（新页面）右侧内容区域为当前scrolltop高度，未置顶（未从顶部显示）。 解决方法： 1、先检查路由文件是否添加 下段代码（此段代码是将整个页面（html）置顶显示，而我们项目是分为上下两块div，上部分为20%，下面高度为80%，下部分又分为左右两部份，左侧围...
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
08-28
主要介绍了vue项目中在使用vue-router切换页面的时候滚动条自动滚动到顶部的实现方法，一般使用Window scrollTo() 方法实现，本文给大家简单介绍了crollTop的使用,需要的朋友可以参考下
vue回滚到顶部
weixin_50260818的博客
04-20 316
在store中方法存储 // 处理各模块主列表页面滚动条返回顶部 handleDocumentToTop() { const el = document.querySelector('.portal-main'); let step = 0; const interval = setInterval(() => { if (el.scrollTop <= 0) {
vue 回到页面顶部
weixin_33949359的博客
08-27 1226
模仿Element-UI 回到页面顶部 BackToTop.vue <template> <transition :name="transitionName"> <div class="page-component-up" @click="backToTop" v-show="visible" :s...
vue 页面跳转至顶部方式
lMasterSparkl的博客
11-09 396
方式1 window.scrollTo(0,0); 方式2 document.body.scrollTop = document.documentElement.scrollTop = 0; 方式3 scrollBehavior 组件 方式4 通过a标签跳转 <a id="jumpTop" href="#" style="visibility: hidden"></a> document.getElementById('jumpTop').click() 方式5 修改route文
vue 跳转页面后回到滚动条顶部
ZoeLinJF的博客
08-16 2298
在路由router.js中加上： scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } }, 之前跳转一直没用，最后排查发现给#app这个元素加了 height: 100%。因为页面是超出100%的，所以我改成了min-height: 100%，跳转后滚动条就回到顶部了 ...
Vue2.5去哪儿网移动端项目
iaz999的博客
05-20 252
页面中使用
使用keep-alive记录上一次滚动的位置，等到返回时仍然滚到之前的位置
flyaway0624的博客
05-18 733
1.首先对当前页面加上keep-alive <template> <div> <keep-alive> <router-view :filter-account="filterAccount" @setFilterAccount="setFilterAccount" :filter-account-id="filterAccountId" v-if="$route.meta.keepAlive" @setFilterAc
vue 文件里回到页面顶部的方法
干脆来碗面的博客
01-29 318
最近在做附件查看页面,由于页面太长 需要一键回到顶部的功能 试了很多方法 借鉴了别人的方法才实现 做个备忘 1 首先需要在页面顶部添加一个div 我是放在根包裹器上 <template> <div> <div id="topFlag"></div> </div> </template> 然后是事件 goTop() { const anchorEle = document.querySe
vue页面切换到滚动页面显示顶部的实例
11-28
在用mint ui写移动端从’listview’跳转到详情页时,详情页面由于大于手机高度可以滚动,当点击’listview’滚动list进入详情页面时发现详情页面不是从顶部开始显示。 一、目标： ‘listview’进入详情页面时详情页面从页面顶部开始显示。 二、让首先查了下两个页面的scrollY,每次都是不一样的,也没有发现listview与详情页面之间的scrollY之间的规律 三、解决思路：进入详情页面的时候固定滚动页面的位置在顶部 四、代码实现：vue里面写法如下，至于updated生命周期里面 updated() { window.scroll(0, 0); } 五
vue router 跳转后回到顶部的实例
12-07
在main.js中加上这段代码 // 跳转后返回顶部 router.afterEach((to,from,next) => { window.scrollTo(0,0); }) 以上这篇vue router 跳转后回到顶部的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
Vue项目中实现页面滚动到顶部功能
最新发布
qq_52569656的博客
09-28 4415
本文基于Vue2+element-ui技术栈，通过scrollTo方法实现页面滚动到顶部功能
vue 返回滚动条顶部组件_vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法...
weixin_39804631的博客
12-21 184
有时候我们需要页面滚动条滚动到某一固定的位置，一般使用Window scrollTo()方法。语法就是：scrollTo(xpos,ypos)xpos：必需。要在窗口文档显示区左上角显示的文档的 x 坐标。ypos：必需。要在窗口文档显示区左上角显示的文档的 y 坐标。例如滚动内容的坐标位置100,500：window.scrollTo(100,500);好了，这个scrollTop这儿只是简单介...
vue跳转滚动条返回顶部
合肥阿花的博客
10-20 3543
//窗口滚动条返回顶部 window.scrollTo(0,0); //组件父节点（&lt;div class="indexRight"&gt;）DIV滚动条返回顶部 this.$el.parentNode.scrollTop = 0;
vue监听滚动scroll一直是0_vue回到顶部监听滚动事件详解
weixin_39638309的博客
12-20 349
本文实例为大家分享了vue回到顶部监听滚动事件，供大家参考，具体内容如下鼠标滚到到页面中间出现的工具浮框回到顶部QQ微信玩QQ玩微信export default {name: 'FloatTools',props: {step: { //此数据是控制动画快慢的type: Number,default: 50}},data() {return {isActive: false,s...
vue工程化：返回顶部和底部的动画效果
weixin_30471065的博客
04-12 153
. <template> <div> <div class="scroll" :class="{show:isActive}"> <div id="toTop" @click="toTop(step)">&lt;</div> ...
关于VUE滚动事件无效解决办法
saq2001的博客
05-08 1265
关于VUE滚动事件无效解决办法 现在methods获取出滚动到顶部的距离 methods: { scroll() { this.scroll = document.documentElement.scrollTop || document.body.scrollTop; } } 在mouted钩子函数触发自定义函数 mounted() { window.addEventListener("scroll", this.scroll);
Vue页面路由动画实现与VueRouter详解
"本文主要介绍如何在Vue.js项目中实现页面跳转的动画效果，结合VueRouter和CSS过渡动画，以提升用户体验。作者通过实际操作和思考，分享了实现这一功能的关键步骤和技术要点。" 在Vue.js开发中，实现页面跳转动画...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值