ElementUI 之 关于 backtop 组件的使用问题

官网给出的方案直接 copy 没啥反应的，文档也没有具体的介绍怎么使用，就贴出来两个样例，和部分代码，着实不上心的文档编辑者。然后去找别人的代码看看到底怎么使用的，但是也不是所有人都能写的很清楚，反正费了老大劲，才找到如何正确使用这个组件。
这里还是发现了几个人写的比较关键：

【作者1】3.ElementUI之backtop组件的使用。

【作者2】ElementBacktop回到顶部的具体使⽤

代码示例

<template>
  <div class="about">
    Scroll down to see the bottom-right button.
    <!-- 设置返回顶部的控件 -->
    <el-backtop target=".about" :bottom="100" visibility-height="300">
      <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>

    <h1>This is an about page</h1>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <h3>关于我们的页面</h3>
    <div>关于我们的页面关于我们的页面关于我们的页面关于我们的页面关于我们的页面关于我们的页面关于我们的页面关于我们的页面关于我们的页面关于我们的页面关于我们的页面关于我们的页面关于我们的页面关于我们的页面关于我们的页面关于我们的页面</div>
    <h3>关于我们的页面</h3>
    <img src="@/assets/logo.png" style="width: 2000px"/>
    <h1>jiejie结尾</h1>
  </div>
</template>

<style>
.about {
  height: 100%;
  /*隐藏横向滚动条后，无法横向滚动，超出屏幕的内容无法显示*/
  /*overflow-x: hidden; */
  /*必须设置纵向滚动，不然返回顶部的按钮不显示*/
  overflow-y: scroll;
}
</style>