vue+element-ui 回到顶部组件backTop

最新推荐文章于 2024-07-17 08:37:25 发布

原创最新推荐文章于 2024-07-17 08:37:25 发布 · 1.1w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#element #vue #backTop #返回顶部 #回到顶部

小功能总结专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何结合Vue.js与Element-UI库，实现页面滚动时的回到顶部组件BackTop。通过配置和自定义样式，使得用户能够轻松点击回到页面顶部。

<template>
    <div class="wraper">
         <template>
            Scroll down to see the bottom-right button.
            <el-backtop target=".wraper">
                <div
                    style="{
                        height: 100%;
                        width: 100%;
                        background-color: #f2f5f6;
                        box-shadow: 0 0 6px rgba(0,0,0, .12);
                        text-align: center;
                        line-height: 40px;
                        color: #1989fa;
                    }"
                    >
                    UP
                </div>
            </el-backtop>
          </template>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
          <div>返回顶部</div>
    </div>
</template>
<script>
export default {
    data(){
        return{

        }
    }
}
</script>
<style scoped>
    .wraper {
        height: 100vh;
        overflow-x: hidden;
    }
</style>

效果：