vue处理事件之后滚动条置顶

最新推荐文章于 2023-09-28 10:46:09 发布

weixin_51490706

最新推荐文章于 2023-09-28 10:46:09 发布

阅读量440

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_51490706/article/details/111563075

版权

<template>
	<div ref="box" @click="changeScroll"></div>
</template>



methods:{
	changeScroll(){
		this.$refs.box.scrollTo(0,0)
	},
}

如果是在页面跳转的时候需要调整滚动条，直接在created里边this.$refs.box.scrollTo(0,0)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_51490706

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue切换路由的时候，如何让右侧滚动条滚动到顶部呢？

猿小白的博客

02-06

7460

使用vue切换页面的时候，发现右侧的滚动条的位置似乎存在缓存似的，当右侧滚动条默认在顶部，切换页面的时候，位置停留在顶部，但当右侧滚动条的停留位置不是在顶部的时候，右侧滚动条停留的位置就会是上一个页面右侧滚动条停留的位置，因此，需要寻找一种方法解决这个问题。下面是解决办法，只需要在router/index.is 里面增加一个scrollBehavior函数，并且指定对应位置即可，x=0,y=0时，默认为顶部，当然你想要设置为其它的位置也是可行的，具体改变对应的x和y的值即可。 // router..

Vue 指定元素滚动条滚到顶部

gdgztt的专栏

12-22

786

Vue 指定元素滚动条滚到顶部

2 条评论您还未登录，请先登录后发表或查看评论

vue elementui中使表的滚动条 滚到顶部或底部

u012970538的博客

09-14

3154

1.设置table的ref为tableList。

页面滚动条置顶、置底

wltsysterm的博客

02-17

3623

置顶操作$('html,body').animate({scrollTop: '0px'}, 10);置底操作$('html,body').animate({scrollTop: document.body.clientHeight+'px'}, 800);

将滚动条置顶,置底

weixin_30702887的博客

10-22

316

Message.prototype.setScrollToBottom = function () { // 整个文档所占的高度 var scrollHeight = (function getScrollHeight(){ var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0...

Vue项目中实现页面滚动到顶部功能

qq_52569656的博客

09-28

5192

本文基于Vue2+element-ui技术栈，通过scrollTo方法实现页面滚动到顶部功能

VUE 实现滚动监听导航栏置顶的方法

10-18

总结来说，通过Vue.js的数据绑定、生命周期钩子和事件监听机制，可以有效地实现滚动监听导航栏置顶的效果。这一技术实现不仅能够提高用户界面的可用性和交互性，还能够提升用户在使用应用时的整体体验。掌握这些知识...

vue3点击按钮滚动条置顶

最新发布

01-10

### Vue3 中实现点击按钮使页面滚动条回到顶部在 Vue3 项目中，可以通过多种方式来实现在点击按钮时让页面的滚动条回到顶部。以下是几种常见的方法： #### 方法一：使用 `window.scrollTo` 函数通过调用 ...

vue2.0路由切换后页面滚动位置不变BUG的解决方法

08-27

Vue 2.0 路由切换后页面滚动位置不变 BUG 的解决方法在 Vue 2.0 项目中，路由切换后页面滚动位置不变是一个常见的问题。这是因为 Vue 的路由机制会将页面滚动到顶部，而不是保持之前的滚动位置。下面我们将讨论这...

vue路由跳转滚动条置顶

09-01

这就是如何在Vue中实现路由跳转时将滚动条置顶的方法。123 #### 引用[.reference_title] - *1* [vue 切换路由页面时，滚动条滚动到最上面]...

Vue 2.0组件设计-滚动置顶

越陌度阡

04-27

964

在前端开发中，滚动置顶是一个比较常见的交互设计，特别是在一些大型网站的首页，当内容篇幅较多时，在页面的底部或是侧边都会放置一个滚动置顶的图标，方便用户快速回到顶部。滚动交互注意事项:1. 置顶图标在什么时候显示，什么时候消失；2. 滚动的过程要做缓冲动画处理，即滚动要速度要递减，才不能显的那么的突兀；组件设计考虑因素:1. 组件要可以传参控制滚动置顶的位置；2. 组件要可以传参控制滚动置顶图标在什么时候显示；3.组件的滚动置顶图标最好支持传参自定义的样式；

vue 切换路由页面时，滚动条滚动到最上面

xingchen678的博客

01-18

4556

vue项目里，使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。可以在路由的导航守卫afterEach里面添加：window.scrollTo(0,0);scrollBehavior: () => ({ y: 0 }), //滚动到顶端。mode: ‘history 或 hash’,第三种方法：（本人用得方法）

vue切换页面滚动条置顶和点击按钮回到顶部

周金鱼啊

11-05

4477

切换页面滚动条置顶 vue使用的是单页面路由，所以切换页面的时候是不会进行刷新的，这时候就会导致滚动条在切换页面之后不会自动回到顶部。我们可以使用vue中的router.afterEach这个钩子来解决这一问题在main.js中新增如下代码就完美解决了 import router from './router'//引入路由 router.afterEach((to,from,nex...

vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

boy火巨的博客

05-16

6511

在网上查了一下，网友说还可以试试在main.js入口文件配合vue-router写这个router.afterEach((to,from,next) => { window.scrollTo(0,0);});原文连接：http://www.jb51.net/article/129270.htm...

Vue监听滚动条事件点击回到顶部

达拉崩巴斑得贝迪卜多比鲁翁_

06-21

1239

Vue监听滚动条事件点击回到顶部监听滚顶条事件： created () { this.listenerFunction(); }, beforeDestroy () { document.removeEventListener("scroll", this.listenerFunction); }, method () { listenerFunction(e) { document.addEventListener('scroll', this.handle

关于vue-router切换滚动条自动置顶的一点记录

aoteman4wo45的博客

05-22

2338

现在在写一个单页面的项目，但是遇到了一个问题，就是每次切换回主页滚动条自动置顶，由于是首页->详情页，这样的页面切换方式，每次切换回来就自动置顶带来的体验非常不好，需要解决这个问题查了一些资料，有vue-router官方自己的滚动方法，还有一个就是keep-alive缓存。首先是官方的方法， scrollBehavior (to, from, savedPos...

vue中页面跳转滚动条置顶

新技术革命

01-17

3650

1.vue单个页面跳转时：在此页面上mounted方法中设置滚动条的方法 mounted() { // 切换页面时滚动条自动滚动到顶部 window.scrollTo(0,0); } router.afterEach((to,from,next) => { window.scrollTo(0,0); ...

vue中切换页面时让目标页面的滚动条自动滚动到顶部的方法

qq_52177667的博客

02-21

5707

问题：单页面跳转如：A页面滚动条滚动后再跳转B页面，在B页面滚动条还是在A页面滚动时的位置解决办法(针对单个页面这个问题的) // 在/b页面, vue的mounted方法中, 写设置页面滚动条的这个方法 mounted() { // 切换页面时滚动条自动滚动到顶部 window.scrollTo(0,0); } 针对全部页面的话, 可以在路由的钩子函数中设置(main.js中)、 // 这个方法我没有亲测, 是查网上资料的, 不过我觉得, 放在`router.beforeEach`

vue 设置滚动条位置

阿豪

02-09

1271

原文链接: vue 设置滚动条位置上一篇: ...