版權聲明：本文為博主原創文章，未經博主允許不得轉載。 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>
大功告成！
單個頁面調用
操作需要調用該組件的頁面文件即可，方法同上。