Backtop 回到顶部

回到顶部组件，用于快速回到页面顶部。

基础用法

<div class="sa-backtop" data-visibility-height="400"></div>

<script>
  SaBacktop.initAll();
  // 或
  SA.init('body');
</script>

加载 SanoUI 组件中...

当页面滚动超过指定高度时，右下角会自动显示回到顶部按钮。

自定义位置

通过 data-right 和 data-bottom 配置按钮位置。

<div class="sa-backtop" 
     data-visibility-height="400"
     data-right="40"
     data-bottom="40">
</div>

<script>
  SaBacktop.initAll();
</script>

加载 SanoUI 组件中...

手动创建

<div id="demo-backtop"></div>

<script>
  const backtop = new SaBacktop('#demo-backtop', {
    visibilityHeight: 400,
    right: 40,
    bottom: 40,
    onClick: () => {
      console.log('回到顶部');
    }
  });
</script>

加载 SanoUI 组件中...

API

构造函数参数

参数	说明	类型	默认值
container	容器选择器或元素	string | HTMLElement	-
options	配置选项	SaBacktopOptions	{}

配置选项

参数	说明	类型	默认值
visibilityHeight	显示高度	number	400
right	距离右边距离	number	40
bottom	距离底部距离	number	40
onClick	点击回调	function()	-

自动初始化属性

属性	说明	类型	默认值
class="sa-backtop"	启用自动初始化	-	-
data-visibility-height	显示高度	number	400
data-right	距离右边距离	number	40
data-bottom	距离底部距离	number	40

静态方法

方法名	说明	参数	返回值
initAll	初始化所有回到顶部按钮	-	void

方法

方法名	说明	参数	返回值
scrollToTop	滚动到顶部	-	void
destroy	销毁实例	-	void

示例代码

自动初始化

<div class="sa-backtop" 
     data-visibility-height="400"
     data-right="40"
     data-bottom="40">
</div>

<script>
  SA.init('body');
</script>

手动创建实例

const backtop = new SaBacktop('#my-backtop', {
  visibilityHeight: 400,
  right: 40,
  bottom: 40,
  onClick: () => {
    console.log('滚动到顶部');
  }
});

// 手动滚动到顶部
backtop.scrollToTop();

实际使用场景

场景 1：长页面回到顶部

在长页面中提供回到顶部功能。

<div style="height: 2000px; padding: 2rem;">
  <h2>这是一个很长的页面</h2>
  <p>向下滚动页面，当滚动超过 400px 时，右下角会显示回到顶部按钮。</p>
  <div style="margin-top: 1000px;">
    <p>继续向下滚动...</p>
  </div>
</div>

<div class="sa-backtop" data-visibility-height="400"></div>

<script>
  SA.init('body');
</script>

加载 SanoUI 组件中...

场景 2：自定义位置和样式

自定义回到顶部按钮的位置和点击行为。

<div style="height: 2000px; padding: 2rem;">
  <h2>自定义回到顶部</h2>
  <p>滚动页面查看效果</p>
  <div style="margin-top: 1000px;">
    <p>继续向下滚动...</p>
  </div>
</div>

<div id="custom-backtop"></div>

<script>
  const backtop = new SaBacktop('#custom-backtop', {
    visibilityHeight: 400,
    right: 60,
    bottom: 60,
    onClick: () => {
      console.log('点击回到顶部');
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    }
  });
</script>

加载 SanoUI 组件中...