关于 element 的 backToTop

最新推荐文章于 2024-06-28 11:18:26 发布

转载最新推荐文章于 2024-06-28 11:18:26 发布 · 246 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/niluiquhz/p/11298281.html

文章标签：

#javascript #ViewUI

本文介绍如何使用Vue和Element UI实现一个带有返回顶部按钮的滚动监听效果。通过设置特定的滚动区域并利用Element UI的<el-backtop>组件，可以实现在页面滚动到一定位置时显示返回顶部按钮的功能。

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

下面是一段完整的小demo。

效果图示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<style>
    * {
        box-sizing: border-box;
    }

    html,
    body {
        margin: 0;
        padding: 0;
    }

    .wraper {
        height: 100vh;
        border: 4px solid red;
        height: 500px;
        overflow: hidden;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .back-ball {
        background-color: tomato;
        color: #fff;
        border-radius: 22px;
        padding: 10px;
    }
</style>

<body>

    <div class="wraper">
        <template>
            Scroll down to see the bottom-right button.
            <el-backtop target=".wraper">
                <div class="back-ball">
                    回到顶部
                </div>
            </el-backtop>
        </template>
        <h1>滚动内容部分</h1>
        <h1>滚动内容部分</h1>
        <h1>滚动内容部分</h1>
        <h1>滚动内容部分</h1>
        <h1>滚动内容部分</h1>
        <h1>滚动内容部分</h1>
        <h1>滚动内容部分</h1>
        <h1>滚动内容部分</h1>
        <h1>滚动内容部分</h1>
        <h1>滚动内容部分</h1>
        <h1>滚动内容部分</h1>
        <h1>滚动内容部分</h1>
        <h1>滚动内容部分</h1>
        <h1>滚动内容部分</h1>
        <h1>滚动内容部分</h1>
        <h1>滚动内容部分</h1>
        <h1>滚动内容部分</h1>
        <h1>滚动内容部分</h1>
        <h1>滚动内容部分</h1>
        <h1>滚动内容部分</h1>
        <h1>滚动内容部分</h1>
        <h1>滚动内容部分</h1>
        <h1>滚动内容部分</h1>
        <h1>滚动内容部分</h1>
        <h1>滚动内容部分</h1>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '.wraper',
        data: {}
    })
</script>

</html>

** 注意： ** target挂载点需要是一个滚动区域（设置高度。overflow-y：scroll）

转载于:https://www.cnblogs.com/niluiquhz/p/11298281.html