Javascript 滚动到另一个组件的特定标记

如何通过单击按钮从一个组件导航到另一个组件。就像我有一个导航栏，上面写着“家”，“关于”。。。在header组件中

<li><a class="text-white" href="#home">Home</a></li>
<li><a class="text-white" href="#about">About</a></li>
<li><a class="text-white" href="#jobs">Opportunities</a></li>
<li><a class="text-white" href="#volunteers">Volunteers</a></li>
<li><a class="text-white" href="#donors">Donors</a></li>
<li><a class="text-white" routerLink="/contact">Contact</a></li>

接触

还有另一个组件，叫做像这样的家

<section id="home">
  <app-home-component></app-home-component>
</section>

<section id="about">
  <app-about></app-about>
</section>

<section id="jobs">
  <app-jobs></app-jobs>
</section>

<section id="volunteers">
  <app-volunteers></app-volunteers>
</section>

<section id="donors">
  <app-donors></app-donors>
</section>

---

现在，当我单击导航栏中的“关于”按钮时，它应该滑动到主组件中的“关于”组件。我不知道怎么做。我尝试使用id和href，但没有成功。有什么建议吗？

在标题中组件向链接添加查询参数：

<li><a class="text-white" [routerLink]="['/home']" [queryParams]="{id: 'home'}">Home</a></li>
<li><a class="text-white" [routerLink]="['/home']" [queryParams]="{id: 'about'}">About</a></li>

---

使用角度特征片段让浏览器处理它

    <a routerLink="" fragment="volunteers"> Volunteers                 </a>

志愿者

检验角碎片

    <a routerLink="" fragment="volunteers"> Volunteers                 </a>