vue+element-ui 回到顶部组件
背景开发框架是vue+webpack+element-ui，需要一个回到顶部的通用组件。开发HTML部分code：<template><transition name="el-fade-in">
<div class="page-up" @click="scrollToTop" v-show="toTopShow">
<i class="el-icon-caret-top"></i>
</div>
</transition>
</template>
这里使用了一个进入动画，看起来自然一点。
CSS部分code：<style scoped lang="scss">
.page-up{
background-color: #409eff;
position: fixed;
right: 50px;
bottom: 30px;
width: 40px;
height: 40px;
border-radius: 20px;
cursor: pointer;
transition: .3s;
box-shadow: 0 3px 6px rgba(0, 0, 0, .5);
opacity: .5;
z-index: 100;
.el-icon-caret-top{
color: #fff;
display: block;
line-height: 40px;
text-align: center;
font-size: 18px;
}
p{
display: none;
text-align: center;
color: #fff;
}
&:hover{
opacity: 1;
}
}
</style>
这也没啥说的，自己觉得好看就行。
JavaScript部分这里是重点了，主要是监听两个事件：屏幕滚动事件
回到顶部按钮的点击事件
屏幕滚动事件code：mounted() {
this.$nextTick(function () {
window.addEventListener('scroll', this.handleScroll,true);
});
},
destroyed() {
window.addEventListener('scroll', this.handleScroll,true);
}
这里有两个注意事项：注意是将事件绑定在window上，监听整个文档的滚动，也可以绑在document或者document.body上
需要在元素加载之后再监听滚动事件
需要将addEventListener的第三个参数设置为true，即取消冒泡，要不然会绑定不成功code：handleScroll() {
let dom =document.getElementsByClassName('content-container');
this.scrollTop = dom.scrollTop;
if (this.scrollTop > 300) {
this.toTopShow = true;
}else {
this.toTopShow = false;
}
},
这里需要注意的地方是：一开始不必将回到顶部按钮显示出来，等用户将页面往下滑动一段距离之后再显示回到顶部按钮，这样更加符合用户的操作习惯
回到顶部按钮的点击事件code：scrollToTop() {
let timer = null;
let _this = this;
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn() {
if (_this.scrollTop > 5000) {
_this.scrollTop -= 1000;
document.getElementsByClassName("content-container").scrollTop =
_this.scrollTop;
timer = requestAnimationFrame(fn);
} else if (_this.scrollTop > 1000 && _this.scrollTop <= 5000) {
_this.scrollTop -= 500;
document.getElementsByClassName("content-container").scrollTop =
_this.scrollTop;
timer = requestAnimationFrame(fn);
} else if (_this.scrollTop > 200 && _this.scrollTop <= 1000) {
_this.scrollTop -= 100;
document.getElementsByClassName("content-container").scrollTop =
_this.scrollTop;
timer = requestAnimationFrame(fn);
} else if (_this.scrollTop > 50 && _this.scrollTop <= 200) {
_this.scrollTop -= 10;
document.getElementsByClassName("content-container").scrollTop =
_this.scrollTop;
timer = requestAnimationFrame(fn);
} else if (_this.scrollTop > 0 && _this.scrollTop <= 50) {
_this.scrollTop -= 5;
document.getElementsByClassName("content-container").scrollTop =
_this.scrollTop;
timer = requestAnimationFrame(fn);
} else {
cancelAnimationFrame(timer);
_this.toTopShow = false;
}
});
}
这里需要主要几点：使用requestAnimationFrame，优点就不必多说了
正常情况下回到顶部的速度是由快变慢的，这样看起来更加符合用户的使用习惯，而且效果也更加好看
将距离顶部的距离划分为五个部分，每个部分的速度都不一样
好用，谢谢啦，content-container这个用参数传进来会更方便
页:
[1]
