Anchor锚点

用于跳转到页面指定位置。

何时使用#

需要展现当前页面上可供跳转的锚点链接,以及快速在锚点之间跳转。

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

代码演示

最简单的用法。

expand codeexpand code
      加载中
    

点击锚点不记录历史。

expand codeexpand code
      加载中
    

锚点目标滚动到屏幕正中间。

expand codeexpand code
      加载中
    

横向 Anchor。

expand codeexpand code
      加载中
    

不浮动,状态不随页面滚动变化。

expand codeexpand code
      加载中
    

自定义锚点高亮。

expand codeexpand code
      加载中
    

监听锚点链接改变

expand codeexpand code
      加载中
    

API#

nz-anchor#

成员说明类型默认值全局配置
[nzAffix]固定模式booleantrue
[nzBounds]锚点区域边界,单位:pxnumber5
[nzOffsetTop]距离窗口顶部达到指定偏移量后触发number-
[nzShowInkInFixed]固定模式是否显示小圆点booleanfalse
[nzTargetOffset]锚点滚动偏移量,默认与 offsetTop 相同,例子number-
[nzContainer]指定滚动的容器string | HTMLElementwindow
[nzCurrentAnchor]自定义高亮的锚点string-
[nzDirection]设置导航方向'vertical' | 'horizontal''vertical'
(nzClick)点击项触发EventEmitter<string>-
(nzChange)监听锚点链接改变EventEmitter<string>-
(nzScroll)滚动至某锚点时触发EventEmitter<NzAnchorLinkComponent>-

nz-link#

成员说明类型
[nzHref]锚点链接string
[nzTarget]该属性指定在何处显示链接的资源。string
[nzTitle]文字内容string | TemplateRef<void>