vue 返回顶部
<div class="go-top">
<button @click="goTop" ref="btn" title="回到顶部">
<i class="iconfont icongoTop"></i>
</button>
</div>
let timer = null;
data() {
return {
isTop: true
};
},
watch: {},
mounted: function() {
this.needScroll();
},
methods: {
needScroll() {
let clientHeight = document.documentElement.clientHeight;
let obtn = this.$refs.btn;
window.onscroll = function () {
let osTop = document.documentElement.scrollTop || document.body.scrollTop
console.log(osTop,clientHeight/3);
if (osTop >= clientHeight/3) {
obtn.style.display = 'block'
} else {
obtn.style.display = 'none'
}
if (!this.isTop) {
clearInterval(this.timer)
}
this.isTop = false
}
},
goTop() {
timer = setInterval(function() {
let osTop =
document.documentElement.scrollTop || document.body.scrollTop;
let ispeed = Math.floor(-osTop / 5);
document.documentElement.scrollTop = document.body.scrollTop =
osTop + ispeed;
this.isTop = true;
if (osTop === 0) {
clearInterval(timer);
}
}, 30);
}
},
.go-top {
width: 100%;
button {
width: 50px;
height: 50px;
border-radius: 50%;
position: fixed;
right: 40px;
bottom: 100px;
border: none;
display: none;
i{
font-size: 0.6rem;
}
}
}
//谨记一 检查父级高度是否有限制
//谨记二 检查父级 overflow: hidden;是否有限制
