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>-