BackTop

滚动超过阈值后在屏幕角落淡入的返回顶部按钮，点击平滑滚回顶部。

最后更新 2026-10-25 19:27:08

说明

默认监听浏览器窗口滚动；传入 Target（CSS 选择器）可改为监听并回滚任意滚动容器，例如后台布局的内容区 #known-content。可见性由 JS 直接切换 CSS 类实现，滚动过程不触发 .NET 重渲染。AdminLayout 已内置本组件，业务页通常无需再手动放置。

常见能力：

超过阈值淡入、点击平滑回顶
Target 支持窗口或任意滚动容器
bottomRight / bottomLeft 角落停靠
Threshold / Bottom / Side 可调
Tip 悬浮提示（CSS Tooltip）
ChildContent 自定义按钮内容

用法

<BackTop />

@* 监听指定滚动容器 *@
<BackTop Target="#known-content" Threshold="400" />

@* 自定义提示文案 *@
<BackTop Tip="回到顶部" />

@* 停靠左下角、自定义内容 *@
<BackTop Placement="bottomLeft">
    <span style="font-size:12px">顶部</span>
</BackTop>

API 参数

参数	类型	默认值	说明
`Bottom`	`int`	`30`	距底部像素，默认 30。
`ChildContent`	`RenderFragment`	`null`	自定义按钮内容；默认显示向上箭头图标。
`OnClick`	`EventCallback`	—	事件点击回顶时触发（滚动动作本身由组件内部完成，此处仅作通知钩子）。
`Placement`	`string`	`"bottomRight"`	停靠角落：bottomRight（默认）/ bottomLeft。
`Side`	`int`	`30`	距停靠侧（右或左）的水平像素，默认 30。
`Target`	`string`	`null`	滚动源 CSS 选择器：监听并回滚该元素（如 #known-content、.content-scroll）。留空或填 window 时监听浏览器窗口。
`Threshold`	`int`	`400`	滚动超过多少像素后显示按钮，默认 400。
`Tip`	`string`	`"返回顶部"`	悬浮提示文案，渲染为样式化的 CSS Tooltip（data-tip）；留空则不显示。
`Visible`	`bool`	`true`	取得或设置组件是否可见，默认为false。
`VisibleChanged`	`EventCallback<bool>`	—	事件取得或设置组件可见性变化时的回调事件。
`Class`	`string`	`null`	取得或设置组件的CSS类名，用于自定义样式。
`Disabled`	`bool`	`false`	取得或设置组件是否禁用，默认为false。
`Style`	`string`	`null`	取得或设置组件的内联样式，用于自定义样式。

所有组件均继承 BaseComponent，除上表参数外还支持 Class、Style、Disabled、Visible。