雜物儲存室 Coding Blog

在 Angular 使用錨點(fragment)

12 Mar 2020

in routing .ts file.

const routerOptions: ExtraOptions = {
  scrollPositionRestoration: 'enabled',
  anchorScrolling: 'enabled',
  scrollOffset: [0, 64],
};

// ...

@NgModule({
  imports: [CommonModule, RouterModule.forRoot(routes, routerOptions)],
  exports: [RouterModule]
})

in component .html

<div class="links">
  <ul>
    <li *ngFor="let id of ids">
      <a [routerLink]="['./']" [fragment]="id"></a>
    </li>
  </ul>
</div>

<section>
  <div class="section" *ngFor="let id of ids" [attr.id]='id' >
    <h1></h1>
    <div class="content">
        content
    </div>
  </div>
</section>
tags: [ Angular ]

Related posts