BackTop

nz-back-top makes it easy to go back to the top of the page.

When To Use#

  • When the page content is very long.
  • When you need to go back to the top very frequently in order to view the contents.

Examples

Scroll down to see the bottom-right gray button.

The most basic usage.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-back-top-basic',
  template: `
    <nz-back-top></nz-back-top>
    Scroll down to see the bottom-right
    <strong> gray </strong>
    button.
  `,
  styles: [
    `
      strong {
        color: rgba(64, 64, 64, 0.6);
      }
    `
  ]
})
export class NzDemoBackTopBasicComponent {}
Scroll down to see the bottom-right gray button.

specifies the scrollable area dom node.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-back-top-target',
  template: `
    Scroll down to see the bottom-right
    <strong> gray </strong>
    button.
    <div class="long-div" #divTarget>
      <div class="long-div-inner"></div>
      <nz-back-top [nzTarget]="divTarget"></nz-back-top>
    </div>
  `,
  styles: [
    `
      :host ::ng-deep .long-div {
        height: 300px;
        overflow-y: scroll;
        background-image: url(//zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg);
      }

      :host ::ng-deep .long-div-inner {
        height: 1500px;
      }

      :host ::ng-deep .long-div .ant-back-top {
        right: 150px;
      }

      :host ::ng-deep strong {
        color: rgba(64, 64, 64, 0.6);
      }
    `
  ]
})
export class NzDemoBackTopTargetComponent {}
Scroll down to see the bottom-right blue button.

You can customize the style of the button, just note the size limit: no more than 40px * 40px.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-back-top-custom',
  template: `
    <nz-back-top [nzTemplate]="tpl" [nzVisibilityHeight]="100" (nzOnClick)="notify()">
      <ng-template #tpl>
        <div class="ant-back-top-inner">UP</div>
      </ng-template>
    </nz-back-top>
    Scroll down to see the bottom-right
    <strong> blue </strong>
    button.
  `,
  styles: [
    `
      :host ::ng-deep .ant-back-top {
        bottom: 100px;
      }

      :host ::ng-deep .ant-back-top-inner {
        height: 40px;
        width: 40px;
        line-height: 40px;
        border-radius: 4px;
        background-color: #1088e9;
        color: #fff;
        text-align: center;
        font-size: 20px;
      }

      :host ::ng-deep strong {
        color: #1088e9;
      }
    `
  ]
})
export class NzDemoBackTopCustomComponent {
  notify(): void {
    console.log('notify');
  }
}

API#

Import this Component Individually#

You can get more detail here.

import { NzBackTopModule } from 'ng-zorro-antd';

nz-back-top#

The distance to the bottom is set to 50px by default, which is overridable. If you decide to use custom styles, please note the size limit: no more than 40px * 40px.

PropertyDescriptionTypeDefault
[nzTemplate]custom contentTemplateRef<void>-
[nzVisibilityHeight]the nz-back-top button will not show until the scroll height reaches this valuenumber400
[nzTarget]specifies the scrollable area dom nodestring|Elementwindow
(nzClick)a callback function, which can be executed when you click the buttonEventEmitter<boolean>-