vue实现滑动超出指定距离回顶部功能

本文实例为大家分享了某视频剪辑软件实现滑动超出指定距离回顶部功能，供大家参考，具体内容如下

效果图展示：

1、当页面滑动时执行scrollToTop()函数，判断滑动的距离是否超出指定距离，注意下面获取getElementsByClassName时，是你被滑动标签的班级。

已安装(){ window。addeventlistener(' scroll '，this.scrollToTop，true)} scroltotop(){ let This=This let DOM=document。getelementsbyclassname(' content ')[0]；//获取滑动模块的信息（注意班级别写错)这个。滚动顶部=DOM。滚动顶部；如果(这个。滚动前200名){这。btnflag=true } else { this。btnflag=false } } 2、当超出指定距离会出来向上的小图标，点击执行backTop()函数回顶部。图标我是用的阿里矢量图标引入到项目中，样式自己调一下。

//点击图标回到顶部方法，加计时器是为了缓慢回到顶部back top(){ let This=This let timer=setInterval(()={ let is feed=math。地板(-这个。滚动顶部/5)文档。getelementsbyclassname(' content ')[0].滚动顶部=这个。如果(这。滚动顶部====0){ clearInterval(timer)} }，16)}，完整代码请看下面：

模板div class=' scrollTop-wrap ' div v-if=' btnFlag ' class=' go-top ' Li class=' icon font iconhuidaodingbu ' @ click=' backTop()'/Li/div/模板脚本导入{ httpGetMethod } from './common/HttpServiCe ' export default { name : ' scroll top '，data : function(){ return { btnflag : false，scrollTop:0//当前滑动距离} },挂载(){ window。addeventlistener(' scroll '，这。scroltotop，true) }，销毁(){ window。removeeventlistener(' scroll '，这。scroltotop，true) }，methods: { //点击图标回到顶部方法，加计时器是为了缓慢回到顶部back top(){ let This=This let timer=setInterval(()={ let is feed=math。地板(-这个。滚动顶部/5)文档。getelementsbyclassname(' content ')[0].滚动顶部=这个。如果(这。滚动顶部====0){ clearInterval(timer)} }，16) }，//计算距离顶部的高度，当高度大于200显示回顶部图标，小于200则隐藏scroltotop(){ let This=This let DOM=document。getelementsbyclassname(' content ')[0]；//获取滑动模块的信息（注意班级别写错)这个。滚动顶部=DOM。滚动顶部；如果(这个。滚动前200名){这。btnflag=true } else { this。btnflag=false } } }/script style lang=' SCS ' @ import './style/mixin '；滚动顶部环绕{相对位置：go-top{位置：绝对值；top : 430 pxleft : 260 pxz-index : 15；iconhuidaodingbu { font-size : 30px；颜色： # 87878A背景-color : # fff；边界半径： 50%;} } }/样式在其他页面引用一下：

模板div class=' wtll-wrap ' div calss=' content '这里是你的滑动内容/div滚动顶部/滚动顶部/div/模板脚本从导入“滚动顶部”./components/scroll top ' export default { name : ' wtll '，data : function(){ return } }，components: { scrollTop }，methods : { }/script以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。