前言
在网站中滚动到顶部的功能是都需要的,不然你数据多,划到了最底下,你还得滚动鼠标划上去,要是我就当场吐血,所以各大网站就都会加一个滚动到顶部的按钮直接一键滚动。那么如何在网站中简单粗暴实现一个滚动到顶部的功能。请看代码
创建按钮
<a href="javascript:void(0)" title="回到顶部" class="toolbar_item back2top" @click="backTop()" v-if="showBtn">
<el-tooltip class="item" effect="dark" content="回到顶部" placement="left">
<svg-icon icon-class="topBar"></svg-icon>
</el-tooltip>
</a>
定义参数
data() {
return {
showBtn: false, // 回到顶部,默认是false,就是隐藏起来
}
},
监听滚动事件
mounted() {
window.addEventListener("scroll", this.toTop, true);
},
定义监听方法
toTop() {
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
this.showBtn = scrollTop > 200
},
上面的>200代表窗口超过body页面的200像素时显示回到顶部按钮
var clientHeight = document.documentElement.clientHeight;
var scrollHeight = document.documentElement.scrollHeight;
var scrollPercent = (scrollTop / (scrollHeight - clientHeight)) * 100;
console.log(scrollPercent + "%");
var roundNum = Math.round(scrollPercent); // 四舍五入取整
这里的代码可以实现显示滚动到页面的百分比数值。按需添加
定义滚动到顶部的方法
backTop() {
var 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);
},
上面的30代表持续多久回到顶部,数值越大则回到顶部的时间越慢。