锚点滚动定位

锚点滚动定位和滚动页面菜单高亮变化(angular and NG-ZORRO)

html

 <div class="menu-top menu-item" [ngClass]="{'pmenu': showBox}">
      <ul>
        <!-- <li [ngClass]="{'active': solutionMode}" (click)="onSolution()">方案详情</li>
        <li [ngClass]="{'active': !solutionMode}" (click)="onSolution(false)">评价</li> -->
        <li>
          <nz-anchor [nzAffix]="false" *ngIf="solutionMode" class="anchor" (nzClick)="scrollToFragment($event)">
            <nz-link [ngClass]="{'ant-after': isRouter == '#details'}" nzHref="#details" nzTitle="方案详情"></nz-link>
            <nz-link [ngClass]="{'ant-after': isRouter == '#cases'}" nzHref="#cases" nzTitle="成功案例"></nz-link>
            <nz-link [ngClass]="{'ant-after': isRouter == '#resources'}" nzHref="#resources" nzTitle="资源"></nz-link>
            <nz-link [ngClass]="{'ant-after': isRouter == '#supports'}" nzHref="#supports" nzTitle="技术支持"></nz-link>
            <nz-link [ngClass]="{'ant-after': isRouter == '#evaluate'}" nzHref="#evaluate" nzTitle="评价"></nz-link>
          </nz-anchor>
        </li>
        <li [hidden]="!showBox">
          <button nz-button nzType="primary" [disabled]="(isLogin && solutionModel.LimitPurchase) || !solutionModel.IsShelved" class="menu-btn" id="btnBuy" margin-top margin-right (click)="onBuyNow()">立即购买</button>
        </li>
      </ul>
    </div>
    <ng-container *ngIf="solutionMode; else commitTemplate">
      <section id="details"></section>
      <div padding class="info" [innerHtml]="solutionModel.FullDescription | sanitizeHtml: 'html'"></div>
      <section class="menu-item" id="cases"><a>成功案例</a></section>
      <div padding class="info" [innerHtml]="solutionModel.Success | sanitizeHtml: 'html'"></div>
      <section class="menu-item" id="resources"><a>资源</a></section>
      <div padding class="info" [innerHtml]="solutionModel.Resources | sanitizeHtml: 'html'"></div>
      <section class="menu-item" id="supports"><a>技术支持</a></section>
      <div *ngFor="let item of solutionModel.SolutionSupports" >
        {{item.Name}} : {{item.ValueRaw}}
      </div>
      <section class="menu-item" id="evaluate"><a>评价</a></section>
      <app-commitlist [data]="commitModel"></app-commitlist>
    </ng-container>

ts

    isRouter = '#details';
    showBox = false;
 scrollToFragment(fragment: string) {
    this.isRouter = fragment;
    const frag = fragment.replace(/#/, '');
    this.router.navigate( ['.' ], { relativeTo: this.route, fragment: frag, replaceUrl: true})
    .then(res => {
      document.querySelector(fragment).scrollIntoView();
    });
  }
  onScroll(event) {
    const show = document.getElementById('show').offsetTop;
    const details = document.getElementById('details').offsetTop + show;
    const cases = document.getElementById('cases').offsetTop + show;
    const resources = document.getElementById('resources').offsetTop + show;
    const supports = document.getElementById('supports').offsetTop + show;
    const evaluate = document.getElementById('evaluate').offsetTop + show;
    if (event.detail.scrollTop >= show) {
      this.showBox = true;
    } else {
      this.showBox = false;
    }
    if (event.detail.scrollTop >= details && event.detail.scrollTop <= cases) {
      this.isRouter = '#details';
    } else if (event.detail.scrollTop >= cases && event.detail.scrollTop <= resources) {
      this.isRouter = '#cases';
    } else if (event.detail.scrollTop >= resources && event.detail.scrollTop <= supports) {
      this.isRouter = '#resources';
    } else if (event.detail.scrollTop >= supports && event.detail.scrollTop <= evaluate) {
      this.isRouter = '#supports';
    } else if (event.detail.scrollTop >= evaluate) {
      this.isRouter = '#evaluate';
    }
  }