1.在組件里進(jìn)行按鈕的樣式設(shè)置
<!-- 點(diǎn)擊回到頂部 -->
<div class="backTop" v-if="topShow" @click="backTop">
<van-icon name="back-top" />
<p>TOP</p>
</div>
.backTop {
width: 30px;
height: 40px;
text-align: center;
color: #087aff;
position: fixed;
right: 10px;
bottom: 130px;
background-color: #fff;
/deep/ .van-icon {
font-size: 20px;
}
p {
margin: 0 0;
font-size: 12px;
}
}
2.監(jiān)聽(tīng)當(dāng)前頁(yè)面滾動(dòng)位置
mounted() {
window.addEventListener("scroll", this.scrollToTop); //監(jiān)聽(tīng)滾動(dòng)條
},
destroyed() {
window.removeEventListener("scroll", this.scrollToTop); //移除滾動(dòng)條監(jiān)聽(tīng)
},
3.觸發(fā)滾動(dòng)事件
data() {
return {
topShow: false, //記錄當(dāng)前返回頂部標(biāo)志的可視狀態(tài)
scrollTop: 0, //當(dāng)前滾動(dòng)位置
};
},
methods: {
// 監(jiān)聽(tīng)到的滾動(dòng)的距離
scrollToTop() {
this.scrollTop =
window.scrollY ||
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
// console.log(this.scrollTop);
// 計(jì)算距離頂部的高度皿伺，當(dāng)高度大于300顯示回頂部圖標(biāo)师逸，小于300則隱藏
if (this.scrollTop > 300) {
this.topShow = true;
} else {
this.topShow = false;
}
},
// 點(diǎn)擊回到頂部方法，加計(jì)時(shí)器是為了過(guò)渡順滑
backTop() {
// console.log(1);
let timer = setInterval(() => {
let ispeed = Math.floor(-this.scrollTop / 5);
document.documentElement.scrollTop = document.body.scrollTop =
this.scrollTop + ispeed;
if (this.scrollTop === 0) {
clearInterval(timer);
}
}, 16);
// 直接上移至頂部
// document.documentElement.scrollTop = document.body.scrollTop = 0;
},
}
tip:main.js中設(shè)置,路由跳轉(zhuǎn)始終保持頂部顯示
import router from './router'//引入路由
router.afterEach((to,from,next) => {
window.scrollTo(0,0); //切換路由之后滾動(dòng)條始終在最頂部
})
有個(gè)更好用的方法
// 控制條移動(dòng)到需要修改的位置
let finScroll = (Number(inputData.page) - 1) * this.pageHeight + Number(inputData.oneY) - 80;
// 需要控制的滾動(dòng)條盒子
let div = document.getElementsByClassName("previewContract")[0];
div.scroll({
left: 0,
top: finScroll,
behavior: "smooth"
});
