• BackTop回到顶部
    • 何时使用
    • 单独引入此组件
    • 代码演示
    • API
      • nz-back-topcomponent

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