版權聲明：本文為博主原創文章，未經博主允許不得轉載。 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

總結

以上是生活随笔為你收集整理的Vue+element UI实现“回到顶部”按钮组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。