需求是移动端的返回顶部和按钮显示与隐藏。
html+css
<div id="app">
<div style="height:1000px;">
</div>
<button @click="backtop" v-if="flag" style="position:fixed; bottom:0" ref="backtop">reverse</button>
</div>
js部分
var vm = new Vue({
el: "#app",
data: {
flag: ""
},
methods: {
getScroll() {
this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
console.log(this.scrollTop)
if (!!document.documentElement.scrollTop && document.documentElement.scrollTop >= 300) {
this.flag = true
} else {
this.flag = false
}
},
backtop(){
const timer = setInterval(function(){
const osTop = document.documentElement.scrollTop || document.body.scrollTop;
const ispeed = Math.floor(-osTop / 5);
document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
this.isTop = true;
if(osTop === 0){
clearInterval(timer);
}
},30)
},
},
mounted() {
window.addEventListener('scroll', this.getScroll);
}
})
