回到顶部组件 (Backtop)

Element-UI 的 Backtop 组件是一个用于返回页面顶部的操作按钮，通常用于长页面，当页面滚动到一定高度时会显示这个按钮，点击后页面会自动滚动回顶部。

提示

Backtop 回到顶部组件官方文档：https://element.eleme.cn/#/zh-CN/component/backtop (opens new window)

1. 基本用法

基本语法：使用 <el-backtop> 标签来插入一个回到顶部的按钮，当页面滚动到指定高度时，该按钮会自动出现，点击按钮后页面会平滑滚动回到顶部。

<template>
  <div class="backtop-demo">
    <!-- 模拟长页面内容 -->
    <div style="height: 1000px;">内容区域</div>

    <!-- Backtop 组件 -->
    <el-backtop :visibility-height="200" :right="50" :bottom="50"></el-backtop>
  </div>
</template>

• 回到顶部按钮显示：当页面滚动超过 visibility-height 设置的高度时，回到顶部的按钮会显示，点击按钮页面会回到顶部。
• 按钮位置：可以通过 right 和 bottom 属性设置按钮在页面中的具体位置。

Backtop 属性

参数	说明	类型	可选值	默认值
target	触发滚动的对象	string	—	—
visibility-height	滚动高度达到此参数值时才显示按钮	number	—	200
right	控制按钮显示位置，距离页面右边距的距离	number	—	40
bottom	控制按钮显示位置，距离页面底部的距离	number	—	40

Backtop 事件

事件名称	说明	回调参数
click	点击按钮触发的事件	点击事件

2. Backtop 常用示例

自定义按钮显示位置

可以通过 right 和 bottom 属性自定义回到顶部按钮在页面中的位置，例如将按钮设置为距离页面右边 50px，底部 50px。

<template>
  <div class="backtop-demo">
    <div style="height: 1000px;">内容区域</div>
    <el-backtop :right="50" :bottom="50"></el-backtop>
  </div>
</template>

• 自定义位置：right 和 bottom 属性分别控制按钮距离页面右边距和底部的距离，默认值分别为 40px。

设置滚动目标

通过 target 属性可以指定触发滚动的容器，当指定了目标容器时，Backtop 会监听该容器的滚动事件，而不是整个页面的滚动。

<template>
  <div ref="scrollContainer" class="scroll-container">
    <div style="height: 1000px;">内容区域</div>
    <el-backtop target=".scroll-container" :visibility-height="300"></el-backtop>
  </div>
</template>

<style>
.scroll-container {
  height: 500px;
  overflow-y: auto;
  position: relative;
  border: 1px solid #ccc;
}
</style>

• 滚动目标：通过 target 属性指定触发滚动的容器，容器可以是类选择器或 DOM 元素。

自定义滚动高度触发

可以通过 visibility-height 属性设置滚动到多高时显示回到顶部按钮。默认值为 200px，可以根据需求调整。

<template>
  <div class="backtop-demo">
    <div style="height: 1500px;">内容区域</div>
    <el-backtop :visibility-height="500"></el-backtop>
  </div>
</template>

• 滚动高度触发：visibility-height 属性控制按钮显示的阈值，页面滚动高度达到该值时按钮才会显示。

监听点击事件

通过监听 click 事件，可以在点击回到顶部按钮时执行自定义操作，如记录日志或执行其他逻辑。

<template>
  <div class="backtop-demo">
    <div style="height: 1500px;">内容区域</div>
    <el-backtop @click="handleBacktopClick"></el-backtop>
  </div>
</template>

<script>
export default {
  methods: {
    handleBacktopClick() {
      console.log('回到顶部按钮被点击');
    }
  }
};
</script>

• 点击事件：通过 click 事件，可以在用户点击回到顶部按钮时触发自定义操作。

3. 总结

• 按钮显示控制：Backtop 组件提供了对按钮显示位置和显示条件的控制，可以通过 right、bottom、visibility-height 等属性灵活设置。
• 滚动容器：可以指定滚动的目标容器，通过 target 属性监听特定容器的滚动事件，适应复杂布局需求。
• 事件处理：通过监听 click 事件，可以在用户点击回到顶部按钮时执行自定义操作，增加交互性。

Backtop 组件在长页面或复杂页面布局中非常实用，可以提高用户的导航体验，同时通过灵活的配置适应各种设计需求。