背景 开发框架是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')[0];
- 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")[0].scrollTop =
- _this.scrollTop;
- timer = requestAnimationFrame(fn);
- } else if (_this.scrollTop > 1000 && _this.scrollTop <= 5000) {
- _this.scrollTop -= 500;
- document.getElementsByClassName("content-container")[0].scrollTop =
- _this.scrollTop;
- timer = requestAnimationFrame(fn);
- } else if (_this.scrollTop > 200 && _this.scrollTop <= 1000) {
- _this.scrollTop -= 100;
- document.getElementsByClassName("content-container")[0].scrollTop =
- _this.scrollTop;
- timer = requestAnimationFrame(fn);
- } else if (_this.scrollTop > 50 && _this.scrollTop <= 200) {
- _this.scrollTop -= 10;
- document.getElementsByClassName("content-container")[0].scrollTop =
- _this.scrollTop;
- timer = requestAnimationFrame(fn);
- } else if (_this.scrollTop > 0 && _this.scrollTop <= 50) {
- _this.scrollTop -= 5;
- document.getElementsByClassName("content-container")[0].scrollTop =
- _this.scrollTop;
- timer = requestAnimationFrame(fn);
- } else {
- cancelAnimationFrame(timer);
- _this.toTopShow = false;
- }
- });
- }
复制代码这里需要主要几点: 使用requestAnimationFrame,优点就不必多说了
正常情况下回到顶部的速度是由快变慢的,这样看起来更加符合用户的使用习惯,而且效果也更加好看
将距离顶部的距离划分为五个部分,每个部分的速度都不一样
|