vue 中自定义返回顶部组件

最新推荐文章于 2023-01-18 15:14:08 发布

CJW-Coder

最新推荐文章于 2023-01-18 15:14:08 发布

阅读量388

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_42143163/article/details/98086048

vue 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个基于Vue.js的返回顶部按钮组件实现方法，通过监听滚动事件动态显示按钮，并使用requestAnimationFrame平滑滚动到页面顶部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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('') 链接的一个图片，大家使用的时候可以替换下。