vue 中自定义返回顶部组件

╰半夏微凉° 2021-11-09 21:22 351阅读 0赞

<template>
        <div id="goTop">
            <div class="goTop" v-show="goTopShow" @click="goTop"><i class="goTopIcon"></i></div>
        </div>
    </template>
    <script>
        export default {
            name: "goTop",
            data() {
                return {
                    scrollTop: '',
                    goTopShow: false,
                }
            },
            methods: {
                handleScroll() {
                    this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                    if (this.scrollTop > 500) {
                        this.goTopShow = true
                    }
                },
                goTop() {
                    let timer = null,
                        _that = this;
                    cancelAnimationFrame(timer)
                    timer = requestAnimationFrame(function fn() {
                        if (_that.scrollTop > 0) {
                            _that.scrollTop -= 100;
                            document.body.scrollTop = document.documentElement.scrollTop = _that.scrollTop;
                            timer = requestAnimationFrame(fn)
                        } else {
                            cancelAnimationFrame(timer);
                            _that.goTopShow = false;
                        }
                    })
                }
            },
            mounted() {
                window.addEventListener('scroll', this.handleScroll);
            },
            destroyed() {
                window.removeEventListener('scroll', this.handleScroll)
            }
        }
    </script>
    
    <style scoped>
        .goTop {
            position: fixed;
            right: 10px;
            bottom: 100px;
            width: 60px;
            height: 60px;
            border-radius: 5px;
            background: linear-gradient(to right, #4eb1ff, #379aff);
        }
        .goTop:hover {
            background: #3682ff;
        }
        .goTopIcon {
            display: block;
            width: 60px;
            height:60px;
            background-image: url("/images/icon/backtop.png");
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>

**注意：background-image:url('') 链接的一个图片，大家使用的时候可以替换下。**