Scroll To Top component using id

 <ul>
          @for(data of aboutMenuList; track data){
          <li (click)="handleMenuActive(data?.id)"><a
              [class]="isSelected==data?.id ? 'active': ''">{{data?.title}}</a></li>
          }
 </ul>


 <div class="about-main-child-right">
        <app-about-us id="0"></app-about-us>
        <!-- END! app-about-us -->

        <app-about-our-values id="1"></app-about-our-values>
        <!-- END! about-our-values -->

        <app-about-our-partners id="2"></app-about-our-partners>
        <!-- END! about-our-partners -->

        <app-about-our-team id="3"></app-about-our-team>
        <!-- END! about-our-team -->

        <app-you-can-trust-us id="4"></app-you-can-trust-us>
        <!-- END! you-can-trust-us -->

        <app-about-our-story id="5"></app-about-our-story>
        <!-- END! about-our-story -->

        <app-about-where-we-operate id="6"></app-about-where-we-operate>
        <!-- END! about-where-we-operate -->
      </div>

  aboutMenuList: any[] = [
    { id: 0, title: 'About Us' },
    { id: 1, title: 'Our Values' },
    { id: 2, title: 'Our Partners' },
    { id: 3, title: 'Our Team' },
    { id: 4, title: 'Trust' },
    { id: 5, title: 'Our Story' },
    { id: 6, title: 'Where We Work' },
  ];

  handleMenuActive(id: any) {

    let element = document.getElementById(id);
    if (element) {
      // element.scrollIntoView({ behavior: 'smooth', block: 'start' });
        const rect = element.getBoundingClientRect();
        const offset = 100;
        const scrollTop = window.pageYOffset + rect.top - offset;
          window.scrollTo({
          top: scrollTop,
          behavior: 'smooth'
        });
    }
  }

Alternative

 <ul>
          @for(data of aboutMenuList; track data){
          <li (click)="handleMenuActive(data?.id)"><a
              [class]="isSelected==data?.id ? 'active': ''">{{data?.title}}</a></li>
          }
 </ul>


 <div class="about-main-child-right">
        <app-about-us id="0"></app-about-us>
        <!-- END! app-about-us -->

        <app-about-our-values id="1"></app-about-our-values>
        <!-- END! about-our-values -->

        <app-about-our-partners id="2"></app-about-our-partners>
        <!-- END! about-our-partners -->

        <app-about-our-team id="3"></app-about-our-team>
        <!-- END! about-our-team -->

        <app-you-can-trust-us id="4"></app-you-can-trust-us>
        <!-- END! you-can-trust-us -->

        <app-about-our-story id="5"></app-about-our-story>
        <!-- END! about-our-story -->

        <app-about-where-we-operate id="6"></app-about-where-we-operate>
        <!-- END! about-where-we-operate -->
      </div>

  aboutMenuList: any[] = [
    { id: 0, title: 'About Us' },
    { id: 1, title: 'Our Values' },
    { id: 2, title: 'Our Partners' },
    { id: 3, title: 'Our Team' },
    { id: 4, title: 'Trust' },
    { id: 5, title: 'Our Story' },
    { id: 6, title: 'Where We Work' },
  ];

  handleMenuActive(id: any) {

    let element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }