Backtop

Matches Arco BackTop with a primary round control targeting only the example's scroll area. See the Element Plus docs for props.

Scroll Area Backtop

Scroll the area to reveal the button; clicking it returns only this area to the top.

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>

Differences from Arco

• Right and bottom default to Element Plus's 40px rather than Arco's 24px; configure them explicitly when needed.