Angular 锚点效果 animate

前言

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

HTML锚点点一下解决 ②

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);

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

注意

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

解决 ②

测试锚点解决 ②
目标点解决 ②

参考文章

点击点写中括号
 [HTML锚点点一下](#jump1)
 目标点写SPAN
 <span id = "jump1">目标点</span>
 或者zzz
 <a id = "jump2">往这跳</a>