angular 锚点滚动

html

<div class="zl-link">
  <a class="first" [ngClass]="{'active-style': currentScroll == 'home'}" (click)="scrollToEL(1)">
    <span class="num">01</span>
    <div class="point"></div>
    <span class="text">home</span>
  </a>

  <a class="second" [ngClass]="{'active-style': currentScroll == 'products'}" (click)="scrollToEL(2)">
    <span class="num">02</span>
    <div class="point"></div>
    <span class="text">product</span>
  </a>

  <a class="third" [ngClass]="{'active-style': currentScroll == 'about'}" (click)="scrollToEL(3)">
    <span class="num">03</span>
    <div class="point"></div>
    <span class="text">about</span>
  </a>

  <a class="fourth" [ngClass]="{'active-style': currentScroll == 'contact'}" (click)="scrollToEL(4)">
    <span class="num">04</span>
    <div class="point"></div>
    <span class="text">contact</span>
  </a>
</div>

<div id="home" class="home-box">
  <h1>第一页</h1>
</div>

<div id="products" class="products-box">
  <h1>第二页</h1>
</div>

<div id="about" class="about-box">
  <h1>第三页</h1>
</div>

<div id="contact" class="contact-box">
  <h1>第四页</h1>
</div>

css

.home-box {
  width: 100%;
  height: 100%;
  background-color: lightseagreen;
}

.products-box {
  width: 100%;
  height: 100%;
  background-color: orange;
}

.about-box {
  width: 100%;
  height: 100%;
  background-color: purple;
}

.contact-box {
  width: 100%;
  height: 100%;
  background-color: cyan;
}

.scroll-box {
  height: 100%;
}

.active-style {
  span {
    color: #40a9ff !important;
    opacity: 1 !important;
  }

  .point {
    background-color: #40a9ff !important;
  }
}

.zl-link {
  position: fixed;
  background: url(assets/imgs/resources/left-link.png) no-repeat;
  background-position: center;
  background-size: cover;
  width: 8px;
  height: 420px;
  left: 50px;
  top: calc(50% - 200px);

  span {
    color: #ffffff;
    opacity: 0.3;
  }

  .num {
    font-size: 14px;
    margin-right: 10px;
  }

  .point {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: lightgray;
    border-radius: 50%;
  }

  .text {
    font-size: 14px;
    margin-left: 10px;
  }

  .first {
    width: 150px;
    position: absolute;
    top: -8px;
    left: -29px;
    cursor: pointer;
  }

  .second {
    width: 150px;
    position: absolute;
    top: 138px;
    left: -29px;
    cursor: pointer;
  }

  .third {
    width: 150px;
    position: absolute;
    top: 283px;
    left: -29px;
    cursor: pointer;
  }

  .fourth {
    width: 150px;
    position: absolute;
    top: 410px;
    left: -29px;
    cursor: pointer;
  }
}

ts

import { Component, OnInit } from '@angular/core';
import { fromEvent } from 'rxjs';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.less']
})
export class DemoComponent implements OnInit {

  public home: any;
  public products: any;
  public about: any;
  public contact: any;
  public currentScroll: string = 'home';
  public subscribeScoll: any;

  public constructor() {
    console.log('DemoComponent');
  }

  public ngOnInit() {
    console.log('ngOnInit');
    this.subscribeScoll = fromEvent(window, 'scroll') 
      .subscribe((event) => {
        this.windowScroll(event);
      });
  }

  public ngOnDestroy() {
    this.subscribeScoll.unsubscribe();
    console.log('ngOnDestroy');
  }

  public windowScroll(event) {
    var scrollTop = document.documentElement.scrollTop;
    console.log(scrollTop);
  }

  public ngAfterViewInit() {
    console.log('视图创建完成');
    this.home = document.getElementById("home");
    this.products = document.getElementById("products");
    this.about = document.getElementById("about");
    this.contact = document.getElementById("contact");
  }

  public scrollToEL(type:number) {
    switch (type) {
      case 1:
        console.log(1);
        this.home.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
        this.currentScroll = 'home';
        break;
      
      case 2:
        console.log(2);
        this.products.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
        this.currentScroll = 'products';
        break;
      
      case 3:
        console.log(3);
        this.about.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
        this.currentScroll = 'about';
        break;
      
      case 4:
        console.log(4);
        this.contact.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
        this.currentScroll = 'contact';
        break;
      default:
        break;
    }
  }

}