element-ui之关于组件BackToTop回到顶部的使用

<div class="home">
	<el-backtop></el-backtop>
	<div class='content'></div>
</div>

<div class="layout">
	<el-backtop target=".layout"></el-backtop>
	<div class='content'></div>
</div>

.layout {
  height: 100vh;/*注意，这里设了这个高度后，后期给window注册onscorll事件时，注册不上*/
  overflow-x: hidden;
}

<template>
  <!-- 外部容器 -->
  <div class="back-top-container">
    <!-- 实际滚动内容 -->
    <div v-for="(item,i) in 150" :key="i">这是文本{{ i }}</div>
    <!-- Backtop 回到顶部组件 -->
    <el-backtop target=".back-top-container" :bottom="100">
      <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;
        margin-right:100px;
      }"
      >
        UP
      </div>
    </el-backtop>
  </div>
</template>

<style lang="scss" scoped>
.back-top-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}
</style>