angular8 锚点的使用方式

angular8 锚点的使用方式

1 首先需要标记锚点位置

标记锚点：行间#+字母就构成锚点

<div #distannce1 >distannce1锚点位置</div>
<div #distannce2 >distannce2锚点位置</div>

2 然后在ts中注册它为锚点

2.1 引入ViewChild与ElementRef

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

2.2 注册为锚点

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

3 链接到锚点

 // 页面链接锚点
  goDistance1() {
    this.distannce1.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
  }
  
  goDistance2() {
    this.distannce2.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
  }