Vue+element UI实现“回到顶部”按钮组件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/caomage/article/details/85006973

背景

开发框架是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，优点就不必多说了 正常情况下回到顶部的速度是由快变慢的，这样看起来更加符合用户的使用习惯，而且效果也更加好看 将距离顶部的距离划分为五个部分，每个部分的速度都不一样

调用

全部页面调用

• 操作App.vue
• 添加JavaScript代码

<script>
import ScrollTop from './components/ScrollTop.vue' export default { components: { 'scroll-top':ScrollTop, } } </script>

• 页面中引用

<scroll-top></scroll-top>

大功告成！

单个页面调用

操作需要调用该组件的页面文件即可，方法同上。

转载于:https://www.cnblogs.com/baoshuyan66/p/10832381.html