关于element-ui:element-backtop组件

当鼠标在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>