这里是我网页的片段snippet

正如你所看到的，我的工具栏上有一些可爱的按钮

我正在尝试通过单击这些按钮导航到我的页面的各个部分 （点击关于我应该向下滚动到关于我部分的开头） 我很难弄清楚这一点。

我将在工具栏下方发布关于我的组件以及 app.component.html 文件。

toolbar.html：

<mat-toolbar class="example-toolbar">
  <span style="margin-left: 120px; height: 40px">Jane Doe</span>
  <span class="example-spacer"></span>

  <div>

    <button mat-button >
      About
    </button>
....

（其余的只是相同的按钮标签，但用于其他内容）

about-me.component.html：

<div class="main-div" id="abme">
  <mat-card class="example-card shadow">
    <mat-card-content>
      <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-around center">
        <div fxLayout="column" fxFlex="50%">

          <p class="title">About me</p>
          <br>

          <p class="about-me-content" style="font-size: 16px">
            Lorem ipsum dolor sit amet,consectetur adipiscing elit. Proin ac quam augue tempor blandit et sit amet mi.
            Donec fringilla dictum tellus,sed porttitor diam. In tempus turpis quis aliquet efficitur.
            Proin auctor lacus rhoncus ultrices hendrerit. Sed eu aliquet metus,vulputate lacinia ex. <br>
            <br> Nulla venenatis nulla nec tellus convallis iaculis id hendrerit nibh. pellentesque sed eleifend diam.
            Suspendisse nec rhoncus augue,id pellentesque sem. Nullam pellentesque ipsum ut dignissim semper.
          </p>
        </div>

        <div fxLayout="column" fxFlex="50%" style="padding-left: 150px">
        // then in this column are the icons,i believe irrelevant to this problem

      </div>
    </mat-card-content>
  </mat-card>
</div>

和 app.component.html:

<app-toolbar></app-toolbar>
<br>
<app-cover-card></app-cover-card>
<br><br>
<app-about-me style="padding: 30px"></app-about-me>
<br><br>
<app-professional-skills style="padding: 40px"  ></app-professional-skills>

.ts 文件与生成时一样，我没有更改其中的任何内容。 任何建议/有用的链接将不胜感激！