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