Scroll To Top component using id

RMAG news
<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 });
}
}

Please follow and like us:
Pin Share