BackTop回到顶部

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

何时使用

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

代码演示

BackTop回到顶部 - 图1

基本

最简单的用法。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-back-top-basic',
  4. template: `
  5. <nz-back-top></nz-back-top>
  6. Scroll down to see the bottom-right
  7. <strong> gray </strong>
  8. button.
  9. `,
  10. styles: [
  11. `
  12. strong {
  13. color: rgba(64, 64, 64, 0.6);
  14. }
  15. `
  16. ]
  17. })
  18. export class NzDemoBackTopBasicComponent {}

BackTop回到顶部 - 图2

滚动容器

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-back-top-target',
  4. template: `
  5. Scroll down to see the bottom-right
  6. <strong> gray </strong>
  7. button.
  8. <div class="long-div" #divTarget>
  9. <div class="long-div-inner"></div>
  10. <nz-back-top [nzTarget]="divTarget"></nz-back-top>
  11. </div>
  12. `,
  13. styles: [
  14. `
  15. :host ::ng-deep .long-div {
  16. height: 300px;
  17. overflow-y: scroll;
  18. background-image: url(//zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg);
  19. }
  20. :host ::ng-deep .long-div-inner {
  21. height: 1500px;
  22. }
  23. :host ::ng-deep .long-div .ant-back-top {
  24. right: 150px;
  25. }
  26. :host ::ng-deep strong {
  27. color: rgba(64, 64, 64, 0.6);
  28. }
  29. `
  30. ]
  31. })
  32. export class NzDemoBackTopTargetComponent {}

BackTop回到顶部 - 图3

自定义样式

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-back-top-custom',
  4. template: `
  5. <nz-back-top [nzTemplate]="tpl" [nzVisibilityHeight]="100" (nzOnClick)="notify()">
  6. <ng-template #tpl>
  7. <div class="ant-back-top-inner">UP</div>
  8. </ng-template>
  9. </nz-back-top>
  10. Scroll down to see the bottom-right
  11. <strong> blue </strong>
  12. button.
  13. `,
  14. styles: [
  15. `
  16. :host ::ng-deep .ant-back-top {
  17. bottom: 100px;
  18. }
  19. :host ::ng-deep .ant-back-top-inner {
  20. height: 40px;
  21. width: 40px;
  22. line-height: 40px;
  23. border-radius: 4px;
  24. background-color: #1088e9;
  25. color: #fff;
  26. text-align: center;
  27. font-size: 20px;
  28. }
  29. :host ::ng-deep strong {
  30. color: #1088e9;
  31. }
  32. `
  33. ]
  34. })
  35. export class NzDemoBackTopCustomComponent {
  36. notify(): void {
  37. console.log('notify');
  38. }
  39. }

API

nz-back-topcomponent

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

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