BackTop回到顶部

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

何时使用

  • 当页面内容区域比较长时；
  • 当用户需要频繁返回顶部查看相关内容时。

单独引入此组件

想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

  1. import { NzBackTopModule } from 'ng-zorro-antd/back-top';

代码演示

BackTop回到顶部 - 图1

基本

最简单的用法。

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

BackTop回到顶部 - 图2

滚动容器

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

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

BackTop回到顶部 - 图3

自定义样式

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

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

API

nz-back-topcomponent

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

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