当鼠标在 container 容器中滚动高度 间隔 container 顶部 超过 400px 时，回到顶部按钮会展现，点击按钮会回到 container 顶部
父组件：
<template>
<div class="container">
<back-top target=".container" :visibility-height="400"> </back-top>
<div class="content"></div>
</div>
</template>
<script>
import BackTop from "@/components/BackTop";
export default {
components: {"back-top": BackTop,},
data() {return {};
},
};
</script>
<style scoped>
.container {
height: 300px;
background-color: aqua;
}
.content {height: 1000px;}
</style>子组件：
<template>
<div
v-if="visible"
class="el-backtop"
@click.stop="handleClick()"
:style="{bottom: styleBottom, right: styleRight}"
>
<slot><i class="el-icon-arrow-up"></i></slot>
</div>
</template>
<script>
import throttle from "throttle-debounce/throttle";
const cubic = (value) => Math.pow(value, 3);
const easeInOutCubic = (value) =>
value < 0.5 ? cubic(value * 2) / 2 : 1 - cubic((1 - value) * 2) / 2;
export default {
name: "BackTop",
props: {
target: String,
visibilityHeight: {
type: Number,
default: 200,
},
bottom: {
type: Number,
default: 40,
},
right: {
type: Number,
default: 40,
},
},
data() {
return {
el: null,
container: null,
visible: false,
};
},
computed: {styleBottom() {return `${this.bottom}px`;
},
styleRight() {return `${this.right}px`;
},
},
created() {},
mounted() {this.init();
this.throttledScrollHandler = throttle(300, this.onScroll);
this.container.addEventListener("scroll", this.throttledScrollHandler);
},
methods: {init() {if (this.target) {this.el = document.querySelector(this.target);
if (!this.el) {throw new Error(`target is not existed: ${this.target}`);
}
this.container = this.el;
}
},
onScroll() {this.visible = this.el.scrollTop >= this.visibilityHeight;},
handleClick() {
const el = this.el;
const beginTime = Date.now();
const beginValue = el.scrollTop;
const rAF =
window.requestAnimationFrame ||
((func) => setTimeout(func, 16));
const frameFunc = () => {const progress = (Date.now() - beginTime) / 500;
if (progress < 1) {el.scrollTop = beginValue * (1 - easeInOutCubic(progress));
rAF(frameFunc);
} else {el.scrollTop = 0;}
};
rAF(frameFunc);
},
},
};
</script>
<style>
.x-backtop {position: fixed;}
</style>