Angular Routing with Hashtag to page anchor

page.component.ts

export class PageComponent implements OnInit {

  private fragment: string;

  constructor(private route: ActivatedRoute) {
  }

  ngOnInit() {
    this.route.fragment.subscribe(fragment => {      
      if (fragment) {
        document.querySelector('#' + fragment).scrollIntoView();
      }
    });
  }
}

page.html

<a  [routerLink]="['/your-page']" fragment="yourAnchorId">Go to content</a>
...
<div id="yourAnchorId">Content</div>

Hi, your code works well but the second time the link is clicked the page scroll not works. I solved not using your page.component.ts code and declaring the routes in app.module.ts as a constant:

import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
      { path: 'yourPath', component: YourComponent},
      // other paths
];

and then I add some options to the forRoot method of RouterModule:

RouterModule.forRoot(routes, {
      onSameUrlNavigation: 'reload',
      anchorScrolling: 'enabled',
      enableTracing: false
    }),

Now the page scroll works even if the scroll link is clicked many times.

Hi, your code works well but the second time the link is clicked the page scroll not works. I solved not using your page.component.ts code and declaring the routes in app.module.ts as a constant:

import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
      { path: 'yourPath', component: YourComponent},
      // other paths
];

and then I add some options to the forRoot method of RouterModule:

RouterModule.forRoot(routes, {
      onSameUrlNavigation: 'reload',
      anchorScrolling: 'enabled',
      enableTracing: false
    }),

Now the page scroll works even if the scroll link is clicked many times.

Works fine : Thanks 👍

None of these solutions work...

In my case I had to add "anchorScrolling" in the file app.config.ts:

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(
    routes, 
    withComponentInputBinding(),
    withInMemoryScrolling({scrollPositionRestoration: "top", anchorScrolling: "enabled"})),
    provideClientHydration()
  ]
};