前言

最近在写本站的关于（About）页面，用到了Element Plus 的组件，其中在使用Backtop组件时遇到了不显示的问题，官方给的使用说明也不够清晰，故记录一下使用要点。

注：制作单一页面时，并没有建立Vue项目，仅仅只通过HTML标签引入全局变量 ElementPlus。

操作

官方给出的示例代码如下：

<template>
  Scroll down to see the bottom-right button.
  <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>

仅单纯的复制这一行代码会发现，页面在向下滚动时，并未出现Backtop组件。

使用关键有两点：

target属性一定要指向产生滚动条的组件。
<el-backtop></el-backtop>一定要写于最外层块级区域的第一行，不可写于代码末尾。

示例如下：

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@next"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>
    <title>About</title>
  </head>
  <body>

    <div id="app" class="main_container" style="height:100%;overflow: auto;">
      <el-backtop target=".main_container"></el-backtop>  <!--  Backtop组件 -->
      <!-- 其余代码 -->
      <div class="container">
        <div style="height: 2400px;"></div>
      </div>
      <div style="height: 2400px;"></div>
    </div>
    
    <script>
      const App = {
        data() {
          return {
            
          };
        },
        methods: {
          
        }
      };
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
    </script>
  </body>
</html>