vue回到顶部(常用)

1. 元素中绑定ref

 <div ref="contentData"></div>

在需要回到顶部的地方加上此代码

   this.$nextTick(() => {this.$refs.contentData.scrollTop = 0})

2. 浏览器回到页面顶部 window.scrollTo(0,0)，页面滚动

window.scrollTo(options)； options 是一个包含三个属性的对象:

top 等同于  y-coord
left 等同于  x-coord
behavior  类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),
默认值auto,实测效果等同于instant

例子：

window.scrollTo( 0, 100 );// 设置滚动行为改为平滑的滚动
window.scrollTo({top: 1000,behavior: "smooth"
});

3. 使用el-pagination实现翻页自动回到顶部

定义$scrollTo方法挂载在vue全局

// main.js
Vue.prototype.$scrollTo = (x = 0, y = 0, type = 'smooth') => {window.scrollTo({top: x,left: y,behavior: type // 滚动行为：smooth平滑滚动，instant瞬间滚动，默认值auto，等同于instant})
}
// 使用方法
this.$scrollTo()

vue回到顶部(常用)相关推荐

vue 回到顶部效果
最终效果: 回到顶部按钮 BackToTop.vue组件: <template><transition :name="transitionName">< ...
router vue 回到顶部_小猿圈HTML5学习之基于iview的router常用控制方式
对于互联网发展的今天,IT行业慢慢变成大多数年轻人发展的目标,不仅前景好,薪资也是越来越高的,而web前端是行业中需要的技术,也促进了大多数朋友在学习html5,今天小猿圈讲师给你分享基于iview的 ...
Vue+element UI实现“回到顶部”按钮组件
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/caomage/article/details/85006973 背景开发框架是vue+webpac ...
Vue HTML：在Vue上写Html遇到的一些问题，html的首行缩进，html的行间距，element UI的回到顶部不显示
Vue & HTML:在Vue上写Html遇到的一些问题,html的首行缩进,html的行间距,element UI的回到顶部不显示资源: HTML 教程- (HTML5 标准) 怎么快速上 ...
vue 返回滚动条顶部组件_vue中回到顶部
1. 回到顶部,使用 scrollIntoView 方法: Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域该方法可以接受一个布尔值作为参数.如果为true,表示元 ...
Vue监听滚动条事件点击回到顶部
Vue监听滚动条事件点击回到顶部监听滚顶条事件: created () {this.listenerFunction(); }, beforeDestroy () {document.remove ...
vue底部跳转_Vue实现回到顶部和底部动画效果
本文实例为大家分享了Vue实现回到顶部和底部动画效果的具体代码,供大家参考,具体内容如下代码: < > export default{ props:{ step:{ //此数据是控制动画 ...
vue项目实现回到顶部的两种超简单方法
vue 中实现回到顶部的两种方式: (1)锚点方式通过点击锚点回到指定位置: <template><div id="topAnchor" ref="f ...
vue中平滑地回到顶部，回到底部
监听的滚动条需要平稳滑动,所以设置几个值,一个定时器.一个定义的scrollTop,方便后续操作 data(){scrollTop: 0,timer: null,scrollBottom: 0,tim ...
vue 给某个div设置回到顶部
1.对某个div设置了滚动,想要回到顶部的情况这种情况下一定要找到是在哪个元素下设置的overflow滚动,就在哪个元素下加方法一.在当前页面无法使用ref获取元素时候,可以使用jq简单实现: 1 ...

vue回到顶部(常用)

vue回到顶部(常用)相关推荐

最新文章

热门文章