Anchor

Hyperlinks to scroll on one page.

When To Use#

For displaying anchor hyperlinks on page and jumping between them.

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

Examples

Basic

The simplest usage.

expand codeexpand code
      Loading...
Customize the onClick event

Clicking on an anchor does not record history.

expand codeexpand code
      Loading...
Set Anchor scroll offset

Anchor target scroll to screen center.

expand codeexpand code
      Loading...
Horizontal Anchor

Horizontally aligned anchors

expand codeexpand code
      Loading...
Basic demoStatic demoAPInz-anchornz-link
Static Anchor

Do not change state when page is scrolling.

expand codeexpand code
      Loading...
Customize the anchor highlight

Customize the anchor highlight.

expand codeexpand code
      Loading...
Listening for anchor link change

Listening for anchor link change.

expand codeexpand code
      Loading...

API#

nz-anchor#

PropertyDescriptionTypeDefaultGlobal Config
[nzAffix]Fixed mode of Anchorbooleantrue
[nzBounds]Bounding distance of anchor area, unit: pxnumber5✅
[nzOffsetTop]Pixels to offset from top when calculating position of scrollnumber0✅
[nzShowInkInFixed]Whether show ink-balls in Fixed modebooleanfalse✅
[nzTargetOffset]Anchor scroll offset, default as offsetTop, examplenumber-
[nzContainer]Scrolling containerstring | HTMLElementwindow
[nzCurrentAnchor]Customize the anchor highlightstring-
[nzDirection]Set Anchor direction'vertical' | 'horizontal''vertical'
(nzClick)Click of Anchor itemEventEmitter<string>-
(nzChange)Listening for anchor link changeEventEmitter<string>-
(nzScroll)The scroll function that is triggered when scrolling to an anchor.EventEmitter<NzAnchorLinkComponent>-

nz-link#

PropertyDescriptionType
[nzHref]target of hyperlinkstring
[nzTarget]Specifies where to display the linked URLstring
[nzTitle]content of hyperlinkstring | TemplateRef<void>