FxBacktop 回到顶部

回到顶部的浮动按钮。监听页面（或 target 容器）滚动，到达 visibility-height 时显示，点击后平滑回到顶部。

不依赖任何 UI 框架，颜色走 @fx/styles 的 --color-* token。

基础用法

页面滚动超过 visibility-height（默认 200）后，右下角出现回到顶部按钮，点击后平滑回到顶部。

<template>
  <p class="desc">向下滚动页面，右下角会出现回到顶部按钮。</p>
  <FxBacktop :right="100" :bottom="100" />
</template>

<style scoped>
.desc {
  margin: 0 0 8px;
  color: var(--fx-text-color-secondary);
}
</style>

自定义内容

通过 default 插槽自定义按钮内容；right / bottom 控制位置（单位 px）。按钮显示区域为 40px × 40px。

<template>
  <p class="desc">向下滚动页面，通过 default 插槽自定义按钮内容。</p>
  <FxBacktop :bottom="100">
    <div class="up-btn">UP</div>
  </FxBacktop>
</template>

<style scoped>
.desc {
  margin: 0 0 8px;
  color: var(--fx-text-color-secondary);
}
.up-btn {
  width: 100%;
  height: 100%;
  background-color: var(--fx-bg-color);
  box-shadow: var(--fx-box-shadow-soft);
  text-align: center;
  line-height: 40px;
  color: var(--fx-color-primary);
}
</style>

API

Attributes

属性	说明	类型	默认值
target	触发滚动的容器 CSS 选择器，空字符串监听页面	string	''
visibility-height	显示按钮所需的滚动高度（px）	number	200
right	距右边距（px）	number	40
bottom	距底边距（px）	number	40

Slots

插槽名	说明
default	自定义按钮内容，默认渲染圆形按钮 + 上箭头图标

Events

事件名	说明	类型
click	点击按钮时触发	(evt: MouseEvent) => void