I have a menu bar with 4 tabs and when I press on every tab it should scroll down to the corresponding category (a specific id), on the same page.
This is the code for the menu:

  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>

      `,

And this one is the scroll directive:

 @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);

      }

    }

The problem is that the offset().top-150 of a specific element changes after switching tabs multiple times and the first time it will redirect to the correct element, but after that, the page will jump randomly to different elements.

I have attached a print screen of the console.

console screenshot

Any suggestions? Thank you!