<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' });
}
}
Top comments (0)