显示侧边栏

回到顶部组件

flux:x-back-top 是 Flux Pro Max 提供的回到顶部按钮组件，当页面滚动超过一定距离后自动出现，点击即可平滑滚动回页面顶部，适合文档页、博客文章等长页面的快捷导航场景。

核心功能

页面滚动超过阈值后自动显示按钮
点击按钮平滑滚动回页面顶部
可配置滚动触发阈值（默认 300px）
可自定义按钮位置（bottom / right）
入场出场过渡动画
完整暗色模式支持
兼容 Livewire 页面导航（livewire:navigated）

基础用法

最简单的用法，直接在布局文件中放置组件。默认滚动超过 300px 后显示按钮，按钮固定在右下角。

{{-- 在布局文件中引入 --}}
<body>
    {{ $slot }}

    <flux:x-back-top />
</body>

自定义滚动阈值

通过 threshold 属性控制按钮出现的滚动距离。默认值为 300（像素），页面滚动超过此值后按钮才会显示。

滚动 500px 后显示按钮

<flux:x-back-top threshold="500" />

稍微滚动即显示按钮

<flux:x-back-top threshold="100" />

自定义按钮位置

通过 bottom 和 right 属性调整按钮在视口中的位置，接受任意 CSS 长度值。

左下角显示按钮

<flux:x-back-top bottom="32px" right="auto" style="left: 32px;" />

完整配置示例

在布局文件中全局引入组件，所有页面自动拥有回到顶部功能。

{{-- 布局文件（如 header.blade.php）--}}
<body>
    {{ $slot }}

    {{-- 回到顶部按钮：滚动 300px 后出现在右下角 --}}
    <flux:x-back-top
        threshold="300"
        bottom="24px"
        right="24px"
    />

    @fluxScripts
</body>

属性参考

下面列出了 flux:x-back-top 支持的全部属性。

属性	类型	默认值	说明
threshold	int	300	滚动触发阈值（px）。页面滚动距离超过此值后显示按钮，低于此值时隐藏。
bottom	string	24px	按钮距视口底部的距离，接受任意 CSS 长度值（如 32px、2rem）。
right	string	24px	按钮距视口右侧的距离，接受任意 CSS 长度值。