Backtop 回到顶部

返回页面顶部的操作按钮。

import { createApp } from 'vue'
import { Backtop as ElBacktop } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElBacktop)

基础用法

通过滑动来查看容器右下角的按钮，点击后会滚动到目标容器的顶部。

<template>
  <div
    id="backtop-basic"
    style="position: relative; height: 220px; overflow: auto; border: 1px solid var(--el-border-color); padding: 8px;"
  >
    <p v-for="i in 20" :key="i">向下滚动查看回到顶部按钮 {{ i }}</p>
    <el-backtop target="#backtop-basic" :visibility-height="80" :bottom="20" :right="20">
      <span class="backtop-mark">↑</span>
    </el-backtop>
  </div>
</template>

<script lang="ts" setup>
import { Backtop as ElBacktop } from '@szhn/dh-design-pc'

</script>

<style scoped>
#backtop-basic :deep(.el-backtop) {
  position: absolute;
}
.backtop-mark {
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: var(--el-color-primary);
  font-size: 18px;
  font-weight: 600;
}
</style>

自定义内容

显示区域固定为 40px × 40px，其中的内容可以自定义。

<template>
  <div class="backtop-wrap" id="backtop-custom">
    <p v-for="i in 20" :key="i">向下滚动查看自定义回到顶部按钮 {{ i }}</p>
    <el-backtop target="#backtop-custom" :visibility-height="100" :right="20" :bottom="20">
      <span class="btn-content">UP</span>
    </el-backtop>
  </div>
</template>

<script lang="ts" setup>
import { Backtop as ElBacktop } from '@szhn/dh-design-pc'

</script>

<style scoped>
.backtop-wrap :deep(.el-backtop) {
  position: absolute;
}
.backtop-wrap {
  position: relative;
  height: 200px;
  overflow: auto;
  padding: 8px 12px;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: var(--el-border-radius-base);
  color: var(--el-text-color-regular);
}
.btn-content {
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: var(--el-color-primary);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
}
</style>

自定义位置

通过 right 和 bottom 属性来控制按钮的显示位置。

<template>
  <div class="backtop-wrap" id="backtop-pos">
    <p v-for="i in 20" :key="i">向下滚动查看调整位置后的按钮 {{ i }}</p>
    <el-backtop target="#backtop-pos" :right="60" :bottom="60" :visibility-height="80">
      <span class="backtop-mark">↑</span>
    </el-backtop>
  </div>
</template>

<script lang="ts" setup>
import { Backtop as ElBacktop } from '@szhn/dh-design-pc'

</script>

<style scoped>
.backtop-wrap :deep(.el-backtop) {
  position: absolute;
}
.backtop-wrap {
  position: relative;
  height: 220px;
  overflow: auto;
  padding: 8px 12px;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: var(--el-border-radius-base);
  color: var(--el-text-color-regular);
}

.backtop-mark {
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: var(--el-color-primary);
  font-size: 18px;
  font-weight: 600;
}
</style>

指定触发容器

通过 target 指定滚动容器的 CSS 选择器，让按钮可以挂在局部容器上。

<template>
  <div class="outer">
    <div class="scroller" id="backtop-target">
      <p v-for="i in 30" :key="i">滚动 {{ i }}</p>
      <el-backtop target="#backtop-target" :visibility-height="80" :right="16" :bottom="16">
        <span class="backtop-mark">↑</span>
      </el-backtop>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Backtop as ElBacktop } from '@szhn/dh-design-pc'

</script>

<style scoped>
.outer {
  padding: 12px;
  background: var(--el-fill-color-light);
  border-radius: var(--el-border-radius-base);
}
.scroller :deep(.el-backtop) {
  position: absolute;
}
.scroller {
  position: relative;
  height: 220px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: var(--el-border-radius-base);
  background: var(--el-bg-color, #fff);
  color: var(--el-text-color-regular);
}

.backtop-mark {
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: var(--el-color-primary);
  font-size: 18px;
  font-weight: 600;
}
</style>

API

Backtop Attributes

属性名	说明	类型	默认值
target	触发滚动的对象（CSS 选择器）	string	—
visibility-height	滚动高度达到此值才出现	number	200
right	距离页面右边距	number	40
bottom	距离页面底部距离	number	40

Backtop Events

事件名	说明	参数
click	点击按钮触发	(event: MouseEvent)

Backtop Slots

插槽名	说明
default	自定义按钮内容

更多信息见 Element Plus Backtop 文档。