前言

在ZORRO组件中，angular有锚点效果，但是使用这个组件，会发现和路由冲突，导致锚点效果，无法实现，解决思路用jQuery的animate() 方法
这是ZORRO组件的锚点

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 {}

解决

jQuery 效果 - animate() 方法Query 效果 - animate() 方法API

使用

      $('#viewContent').animate({ scrollTop: $('#' + 'components_pingsheng').offset().top }, 400);

第一个参数获取像素点，第二个参数，滑动速度，单位毫秒

注意

这只是像素点位移，会面临滑动不精确问题，多调试，绑定点击事件触发