vue+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>

效果:

发布了18 篇原创文章 · 获赞 40 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/weixin_42598901/article/details/99674145