回到顶部 Backtop

对应 Arco BackTop，使用主色圆形按钮，目标限制在示例滚动区域。 属性用法见 Element Plus 文档。

区域回到顶部

滚动下面区域后出现按钮，点击只返回这个区域的顶部。

Scroll item 1

Scroll item 2

Scroll item 3

Scroll item 4

Scroll item 5

Scroll item 6

Scroll item 7

Scroll item 8

Scroll item 9

Scroll item 10

Scroll item 11

Scroll item 12

Scroll item 13

Scroll item 14

Scroll item 15

Scroll item 16

Scroll item 17

Scroll item 18

Scroll item 19

Scroll item 20

<script setup lang="ts">
import { useId } from 'vue'
// A unique id so the button scrolls this box, not the whole page.
const id = useId()
</script>

<template>
  <div style="position: relative; width: 100%">
    <div :id="id" style="height: 240px; overflow-y: auto; border: 1px solid var(--el-border-color)">
      <p v-for="item in 20" :key="item" style="padding: 16px">Scroll item {{ item }}</p>
    </div>
    <el-backtop :target="'#' + id" :visibility-height="80" :right="16" :bottom="16" style="position: absolute" />
  </div>
</template>

与 Arco 的差异

• 默认 right / bottom 为 Element Plus 的 40px，Arco 为 24px；可通过属性显式配置。