3.ElementUI之backtop组件的使用。

官网给出的方案很有意思，直接copy没啥反应的，然后去找别人的代码看看，几乎也没人写能清楚，这个组件到底应该怎么使用。

<template>
  <div class="container">
    <el-backtop target=".container" :visibility-height="300">
      <div
        style="
           {
            height: 100%;
            width: 100%;
            background-color: #f2f5f6;
            box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
            text-align: center;
            line-height: 40px;
            color: #1989fa;
          }
        "
      >
        UP
      </div>
    </el-backtop>

    <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>
.container {
  height: 500px;
  overflow-x: hidden;
}
</style>

关于backtop组件分析。

首先在外层需要定义一个容器包裹<el-backtop></el-backtop>这个组件，同时这个容器的class样式名字对应的是<el-backtop></el-backtop>组件里面的target属性（即触发滚动的对象）

而下图这个红色框选区域的代码，他是（返回图标）的样式设计效果，这块区域的代码可有可无。

至于内容撑高区域，不是写在<el-backtop></el-backtop>组件里面包裹着的，相反内容区域写在<el-backtop></el-backtop>组件之外。

容器定义样式（这2个属性必须要写）

这里我们定义了容器的整个高度是500px

这里容器定义的500px 和我们下面这行代码绑定的:visibility-height="300"有一定的关系。