回到顶部
v2.0.6+

回到顶部组件，页面滚动超过阈值后自动显示，点击平滑回到顶部。无需额外配置，引入即用。

基础用法

  • Preview
  • Code

滚动页面，右下角会出现回到顶部按钮

👇 向下滚动查看效果 👇 
<!-- 无需任何标记，自动创建 -->

自定义元素

  • Preview
  • Code

通过添加 id="bny-backtop" 可以自定义回到顶部按钮样式

↑ 示例展示，实际会固定在右下角

<div id="bny-backtop">
    <i class="bny-icon icon-arrowup"></i>
</div>

自定义阈值

  • Preview
  • Code

通过 data-threshold 属性设置滚动阈值（默认 200px）

<!-- 滚动 100px 后显示 -->
<div id="bny-backtop" data-threshold="100">
    <i class="bny-icon icon-up"></i>
    <span>Top</span>
</div>

<!-- 或使用 data-bny-backtop 属性 -->
<div class="bny-backtop" data-bny-backtop="300">
    <i class="bny-icon icon-arrowup"></i>
</div>

配合气泡提示

  • Preview
  • Code

配合 bny-tip 属性增加悬浮提示

<!-- 自定义 backtop 元素，带 tooltip 提示 -->
<div id="bny-backtop" bny-tip="回到顶部">
    <i class="bny-icon icon-arrowup"></i>
</div>

指定滚动容器

  • Preview
  • Code
默认监听 window 滚动；通过 data-target 指定选择器，可绑定到内部滚动容器；不指定时自动检测 #bny-content 或 [data-scroll-container]。支持页面同时存在多个 backtop 实例。 
<!-- 指定容器 -->
<div id="bny-backtop" data-target="#my-scroll" data-threshold="100">
    <i class="bny-icon icon-arrowup"></i>
</div>
<div id="my-scroll" style="height:300px;overflow:auto;">...</div>

<!-- 自动创建（页面无任何 backtop 元素时）-->
<!-- 脚本会在 body 末尾自动插入 #bny-backtop -->

API

属性

属性 默认值 必须 描述 版本
class bny-backtop 否 自动添加的类名
id - 否 设置为 bny-backtop 可使用自定义元素
data-bny-backtop - 否 标记为回到顶部元素（值为数值时作为滚动阈值）
data-threshold 200 否 滚动阈值（px），超过此值显示按钮

行为说明

  • 未自定义时自动创建按钮，追加到 <body> 末尾
  • 滚动超过阈值时淡入显示，回到顶部区域时淡出隐藏
  • 点击平滑滚动到页面顶部（behavior: smooth）
  • 支持 HTMX 动态加载，通过 htmx.onLoad 自动扫描新内容
  • 滚动事件使用 requestAnimationFrame 节流