關於 element 的 backToTop

時間 2019-11-11

標籤關於 element backtotop 简体版

原文原文鏈接

下面是一段完整的小demo。

效果圖示例：
css

<!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）html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。