Anchor

Hyperlinks to scroll on one page.

When To Use#

For displaying anchor hyperlinks on page and jumping between them.

Examples

The simplest usage.

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

@Component({
  selector: 'nz-demo-anchor-basic',
  template: `
    <nz-anchor>
      <nz-link nzHref="#components-anchor-demo-basic" nzTitle="Basic demo"></nz-link>
      <nz-link nzHref="#components-anchor-demo-static" nzTitle="Static demo"></nz-link>
      <nz-link nzHref="#api" nzTitle="API">
        <nz-link nzHref="#nz-anchor" nzTitle="nz-anchor"></nz-link>
        <nz-link nzHref="#nz-link" nzTitle="nz-link"></nz-link>
      </nz-link>
    </nz-anchor>
  `
})
export class NzDemoAnchorBasicComponent {}

Do not change state when page is scrolling.

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

@Component({
  selector: 'nz-demo-anchor-static',
  encapsulation: ViewEncapsulation.None,
  template: `
    <nz-anchor [nzAffix]="false">
      <nz-link nzHref="#components-anchor-demo-basic" nzTitle="Basic demo"></nz-link>
      <nz-link nzHref="#components-anchor-demo-static" nzTitle="Static demo"></nz-link>
      <nz-link nzHref="#api" nzTitle="API">
        <nz-link nzHref="#nz-anchor" nzTitle="nz-anchor"></nz-link>
        <nz-link nzHref="#nz-link" nzTitle="nz-link"></nz-link>
      </nz-link>
    </nz-anchor>
  `
})
export class NzDemoAnchorStaticComponent {}

API#

Import this Component Individually#

You can get more detail here.

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

nz-anchor#

PropertyDescriptionTypeDefault
[nzAffix]Fixed mode of Anchorbooleantrue
[nzBounds]Bounding distance of anchor area, unit: pxnumber5
[nzOffsetBottom]Pixels to offset from bottom when calculating position of scrollnumber-
[nzOffsetTop]Pixels to offset from top when calculating position of scrollnumber0
[nzShowInkInFixed]Whether show ink-balls in Fixed modebooleanfalse
[nzTarget]Scrolling containerstring|HTMLElementwindow
(nzClick)Click of Anchor itemEventEmitter<string>-
(nzScroll)The scroll function that is triggered when scrolling to an anchor.EventEmitter<NzAnchorLinkComponent>-
PropertyDescriptionTypeDefault
[nzHref]target of hyperlinkstring-
[nzTitle]content of hyperlinkstring|TemplateRef<void>-