1.首先创建一个backTop.vue页面：
页面有两个按钮，一个回到顶部按钮，一个刷新按钮(showRefresh:false将刷新按钮隐藏)，实现效果如下：
代码解析：
domName:需要监听滚动的dom类名，不传默认监听body
showRefresh:是否显示刷新按钮
right:组件定位距离右侧像素，默认距离右侧50px
bottom:组件定位距离底部像素，默认距离底部66px
默认监听dom元素滚动50px(scrollTop>50)后显示回到顶部组件，可自由更加情景设置
代码实现：
<template><div><div class="fixed-button" :style="fixedStyle"><div class="refresh-area" @click="refreshData" v-if="showRefresh"><i class="refresh"></i></div><div class="arrow-area" @click="backTop"><i class="arrowUp"></i></div></div></div>
</template><script>
export default {//设置需要监听滚动的div名称，默认'',监听bodyprops: {domName: {type: String,default: '',},showRefresh: {type: Boolean,default: true,},right: {type: Number,default: 50,},bottom: {type: Number,default: 66,},},data() {return {fixedStyle: 'display:none;',dom: null, //被监听的dom}},mounted() {console.log('domName', this.domName)if (this.domName != '') {this.dom = document.querySelector('.' + this.domName)this.dom.addEventListener('scroll', this.scrollToTop)} else {document.body.addEventListener('scroll', this.scrollToTop)}},destroyed() {if (this.domName != '') {this.dom.removeEventListener('scroll', this.scrollToTop)} else {document.body.removeEventListener('scroll', this.scrollToTop)}},methods: {// 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏scrollToTop() {const that = thislet scrollTop = 0if (this.domName != '') {scrollTop = this.dom.pageYOffset || this.dom.scrollTop} else {scrollTop = window.pageYOffset || document.body.scrollTop}that.scrollTop = scrollTopif (that.scrollTop > 50) {that.fixedStyle = `right:${this.right}px;bottom:${this.bottom}px;`} else {that.fixedStyle = 'display:none;'}this.$emit('scrollToTop')},// 刷新refreshData() {// this.$refs.child1Container.refreshDataMoren("");this.$emit('refreshData')},// 回到顶部backTop() {const that = thislet timer = setInterval(() => {let ispeed = Math.floor(-that.scrollTop / 5)if (this.domName != '') {this.dom.scrollTop = that.scrollTop + ispeed} else {document.documentElement.scrollTop = document.body.scrollTop =that.scrollTop + ispeed}if (that.scrollTop === 0) {clearInterval(timer)}}, 20)},},
}
</script><style>
.fixed-button {position: fixed;/* width: 40px; */bottom: 66px;right: 50px;z-index: 999999;
}
.refresh-area {color: #20499e;cursor: pointer;width: 34px;height: 34px;line-height: 34px;background: #ffffff;box-shadow: 0px 2px 6px 2px rgba(54, 78, 128, 0.1);border-radius: 50%;font-size: 16px;text-align: center;
}
.arrow-area {color: #20499e;cursor: pointer;width: 34px;height: 34px;line-height: 34px;margin-top: 12px;border-radius: 50%;text-align: center;background: #ffffff;box-shadow: 0px 2px 6px 2px rgba(54, 78, 128, 0.1);color: #20499e;
}
.refresh-area:hover {background: #20499e !important;
}
.arrow-area:hover {background: #20499e !important;
}
.refresh-area:hover .refresh {background: url('../assets/refreshHover.svg') no-repeat center !important;
}
.arrow-area:hover .arrowUp {background: url('../assets/goTopHover.svg') no-repeat center !important;
}
.refresh {display: inline-block;width: 16px;height: 16px;background: url('../assets/refresh.svg') no-repeat center;margin-top: 9px;
}
.arrowUp {display: inline-block;width: 14px;height: 16px;background: url('../assets/goTop.svg') no-repeat center;margin-top: 9px;
}
</style>
