小编Ele*_*naE的帖子

我有一个带有 4 个选项卡的菜单栏，当我按下每个选项卡时，它应该向下滚动到同一页面上的相应类别（特定 ID）。这是菜单的代码：

  template: `
        <div class="action-container">
          <div class="btn-group quick-navigation custom-group" role="group">
            <a *ngFor="let section of sections" [scrollTo]="section.id" (click)="active = section.id"
               class="btn btn-secondary" [class.active]="section.id == active">{{section.name}}</a>
          </div>
        </div>
      `,

这是滚动指令：

 @Directive({
      selector: '[scrollTo]'
    })
    export class ScrollToDirective {
      @Input() scrollTo: string;
      @HostListener('click', ['$event']) onClick(e) {
        console.log(this.scrollTo);
        console.log($(`#${this.scrollTo}`).offset().top - 150);
        $('html, body').animate({
          scrollTop: $(`#${this.scrollTo}`).offset().top - 150
        }, 500);
      }
    }

问题在于，多次切换选项卡后，特定元素的 offset().top-150 会发生变化，第一次会重定向到正确的元素，但之后页面会随机跳转到不同的元素。

我已附上控制台的打印屏幕。

控制台截图

有什么建议么？谢谢你！