實(shí)現(xiàn)功能:當(dāng)屏幕大于多少,展示出返回頭部的按鈕峻呕,當(dāng)屏幕小于多少就隱藏返回頭部的按鈕利职;
展示返回頭部
隱藏返回頭部
代碼展示
//第一步
mounted() {
//獲取當(dāng)前的頁(yè)面滾動(dòng)事件,然后執(zhí)行 this.showheader事件
window.addEventListener('scroll', this.showheader);
},
destroyed() {
window.removeEventListener('scroll', this.showheader);
},
//第二步
showheader: function() {
//當(dāng)前屏幕等于多少執(zhí)行的事件
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
this.scrollTop = scrollTop
console.log(scrollTop)
if (scrollTop > 541) {
//當(dāng)屏幕大于541的時(shí)候山上,就顯示眼耀,小于則不顯示
this.show = true;
} else {
this.show = false;
}
}
//第三步
backTop: function() {
//返回頭部的動(dòng)畫
const that = this
let timer = setInterval(() => {
let ispeed = Math.floor(-that.scrollTop / 7)
document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
if (that.scrollTop === 0) {
clearInterval(timer)
}
}, 10)