温馨提示(vue中使用哦!)
html
<div class="zhuans" @click="zhuans" v-show="totop">
<img
src="../../../assets/images/zhidingtao.png"
alt=""
style="width: 100%"
/>
</div>
js
mounted() {
window.addEventListener("scroll", this.handleScroll);
},
handleScroll() {
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
if (scrollTop > 100) {
this.totop = true;
//大于200的时候要做的操作
} else {
this.totop = false;
}
},
zhuans() {
var that = this;
let scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
let timer = setInterval(() => {
scrollTop -= 100;
window.scrollTo(0, scrollTop);
if (scrollTop <= 0) {
that.totop = false;
clearInterval(timer);
}
}, 25);
},
.zhuans {
width: 50px;
height: 50px;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
position: fixed;
right: 0px;
bottom: 16%;
z-index: 999;
}