Vue实现返回顶部或者回到底部的功能实现

PS:mounted函数下实现监听滚动条参数变化，方便监听scrollToTop是否为0，排查故障，如果一直为0，需要注意是否是overflow引起的，如果是该问题，可以overflow：visible；如果不是这个问题，可以看看外层高度是否定义，未定义设置一个100%或者固定值看看，scrollToTop是否会变化。

HTML代码示例部分

<div class="wrap" id="wrap" ref="contentData"></div>

mounted(){

this.$nextTick(function () {

window.addEventListener('scroll', this.scrollToTop, true)

})

},

methods: {

scrollToTop(e) {

var scrollTop2 =document.querySelector(".wrap").scrollTop;//获取特定的divscrollTop值

var scrollTop =document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;//获取body divscrollTop值

},

//返回顶部函数

BackToTop(){

//方法一：

this.$refs.contentData.scrollTop = 0

//方法二：

this.$nextTick(() => {

let div = document.getElementById('wrap')

div.scrollTop =0;

console.log(div.scrollTop);

})

Ps：回到底部方法实现原理：

先获取滚动条的高度，然后scrollTop等于滚动条高度就行；

代码示例：

this.$nextTick(() => {

let clientHeight =document.querySelector(".wrap").scrollHeight;

this.$refs.contentData.scrollTop =clientHeight；//也可以用上文方法二写

})

},

}