BackTop回到顶部

  • 注意：该组件将在后续移除，请前往 FloatButton 组件中使用 <nz-float-button-top></nz-float-button-top>

返回页面顶部的操作按钮。

何时使用#

  • 当页面内容区域比较长时；
  • 当用户需要频繁返回顶部查看相关内容时。
import { NzBackTopModule } from 'ng-zorro-antd/back-top';

代码演示

Scroll down to see the bottom-right gray button.
基本

最简单的用法。

expand codeexpand code
      加载中
Scroll down to see the bottom-right gray button.
滚动容器

设置 nzTarget 参数，允许对某个容器返回顶部。

expand codeexpand code
      加载中
Scroll down to see the bottom-right blue button.
自定义样式

可以自定义回到顶部按钮的样式，限制宽高：40px * 40px。

expand codeexpand code
      加载中

API#

nz-back-top#

有默认样式，距离底部 50px，可覆盖。 自定义样式宽高不大于 40px * 40px。

成员说明类型默认值全局配置
[nzTemplate]自定义内容，见示例TemplateRef<void>-
[nzVisibilityHeight]滚动高度达到此参数值才出现 nz-back-topnumber400✅
[nzTarget]设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数string | Elementwindow
[nzDuration]回到顶部所需时间（ms）number450
(nzClick)点击按钮的回调函数EventEmitter<boolean>-