Angular 8 scroll to top on route change

The router will emit an event when a new component gets loaded in the so you can attach an event to it.

So in your component with use:

and then in the same component where you placed add the following method:

scrollTop[event] { window.scroll[0,0]; }

Wait for the component to initialized component before you start scrolling. So better to put this code under ngAfterViewInit function.

ngAfterViewInit[] { this.router.events.subscribe[[evt] => { if [![evt instanceof NavigationEnd]] { return; } window.scrollTo[0, 0] }]; }

This similar issue was faced by me which was due to the style applied to body. i.e.

body { height: 100%; overflow-x: hidden; }

If I removed this style then my layout was badly affected.

Instead of removing style I tried below solution and it worked for me...

Solution:

export class AppComponent implements OnInit { constructor[private router: Router, private changeDetect: ChangeDetectorRef] { } ngOnInit[] { this.router.events.subscribe[[evt] => { if [![evt instanceof NavigationEnd]] { return; } // Change height:100% into auto $['body'].css['height', 'auto']; // Successfully scroll back to top $['body'].scrollTop[0]; // Remove javascript added styles $['body'].css['height', '']; this.changeDetect.detectChanges[]; }]; } }

Video liên quan