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

The simplest usage.

expand codeexpand code
Loading...

Clicking on an anchor does not record history.

expand codeexpand code
Loading...

Anchor target scroll to screen center.

expand codeexpand code
Loading...

Horizontally aligned anchors

expand codeexpand code
Loading...

Do not change state when page is scrolling.

expand codeexpand code
Loading...

Customize the anchor highlight.

expand codeexpand code
Loading...

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#

| Property | Description | Type | Default | | ------------ | ----------------------------------------- | ----------------------------- | ------- | --- | | [nzHref] | target of hyperlink | string | - | | [nzTarget] | Specifies where to display the linked URL | string | - | | | [nzTitle] | content of hyperlink | string \| TemplateRef<void> | - |