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' }); } }

 <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' }); } }