Javascript按ID滾動到特定元素

Question

我有一個帶有 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在多次切換tab后會發生變化，第一次會重定向到正確的元素，但之后頁面會隨機跳轉到不同的元素。

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

控制台截圖

有什么建議？ 謝謝！

Answer 1

您不必計算任何值來做您想做的事情，也根本不必使用 JavaScript。 至少，因為您不想要平滑滾動。

您可以輕松滾動到任何帶有 id 設置href屬性的元素：

<a href="#my_id" id="my_link">Click me to scroll down</a>

...

<section id="my_id">...</section>

好的，根據您的評論，這樣做時與 angular 的 Router 存在沖突，因此您可以使用一點 JavaScript 來解決問題：

document.getElementById("my_link").addEventListener("click",(e)=>{
    e.preventDefault();
    document.querySelector(e.currentTarget.href).scrollIntoView();
});

Answer 2

快速回答：

element = document.getElementById("message");
element.scrollIntoView();