如何将Vue实现滑动超出一定距离自动返回顶部的功能？

本文共计753个文字，预计阅读时间需要4分钟。

原文示例：本文实例为大家分享了Vue实现滑动超出指定距离回顶部功能，供大家参考。具体内容如下+效果图展示：1、当页面滑动时执行scrollToTop()函数，判断滑动的距离是否超出指定距离。

改写后：本文以Vue为例，展示了如何实现滑动超出指定距离后自动回顶部功能。具体内容与效果如下：1、页面滑动时调用scrollToTop()函数，检测滑动距离是否超过设定值。

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

效果图展示：

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 （）函数回顶部。图标我是用的阿里矢量图标引入到项目中，样式自己调一下。