For Angular 6+ you can use:
-
In your routing module:
imports: [RouterModule.forRoot(routes, { anchorScrolling: 'enabled'})]
-
Then in your component html
<a (click)="onClick('AnchorId')">Click me!</a> <a (click)="onClick('OtherAnchorId')">Click me, too!</a> ... <div id="AnchorId">...</div> ... <div id="OtherAnchorId">...</div>
-
Then in your component ts
import { ViewportScroller } from '@angular/common'; @Component({ selector: 'component-selector', templateUrl: './mycomponent.component.html' }) export class MyComponent { constructor(private viewportScroller: ViewportScroller) {} public onClick(elementId: string): void { this.viewportScroller.scrollToAnchor(elementId); } }