本文实例为大家分享了vue实现滑动超出指定距离回顶部功能，供大家参考，具体内容如下
成都创新互联从2013年开始，是专业互联网技术服务公司，拥有项目成都网站设计、网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元延长做网站,已为上家服务,为延长各地企业和个人服务,联系电话:028-86922220
效果图展示：
1、当页面滑动时执行scrollToTop （）函数，判断滑动的距离是否超出指定距离，注意下面获取getElementsByClassName时，是你被滑动标签的class。
mounted() {
window.addEventListener('scroll', this.scrollToTop, true)
}
scrollToTop () {
let This = this
let dom = document.getElementsByClassName('content')[0];//获取滑动模块的信息（注意class别写错）
This.scrollTop = dom.scrollTop;
if (This.scrollTop > 200) {
This.btnFlag = true
} else {
This.btnFlag = false
}
}2、当超出指定距离会出来向上的小图标，点击执行backTop （）函数回顶部。图标我是用的阿里矢量图标引入到项目中，样式自己调一下。
// 点击图标回到顶部方法，加计时器是为了缓慢回到顶部
backTop () {
let This = this
let timer = setInterval(() => {
let ispeed = Math.floor(-This.scrollTop / 5)
document.getElementsByClassName('content')[0].scrollTop = This.scrollTop + ispeed
if (This.scrollTop === 0) {
clearInterval(timer)
}
}, 16)
},完整代码请看下面：
在其他页面引用一下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
网站栏目：vue实现滑动超出指定距离回顶部功能
转载源于：
http://www.cdkjz.cn/article/pcpeph.html
