Angular中锚点的几种方法

项目现象：在静态页面中往往需要点击某个按钮跳转到当前页面的某个地方

实现：

方法一：（不推荐）

页面:

跳转到2

控制：

goDistance(location: string): void {
    window.location.hash = ''; 
    window.location.hash = location;
}

方法二：

页面:

跳转到2

控制：

import { ViewChild, ElementRef } from '@angular/core';

@ViewChild('distannce1') distannce1: ElementRef;
@ViewChild('distannce2') distannce2: ElementRef;

goDistance(): void {
    this.distannce2.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
}

方法三：如果在项目中引入了jquery那就可以直接用了

页面：

跳转到2

控制：

import * as $ from 'jquery';


goDistance(){
    let location= $('#' + this.routerinfo.snapshot.queryParams['distance']).offset().top;
    $('html, body').animate({ scrollTop: location }, 500);
}

方法四：（引入框架自带的，举个例子【Ant Design】）