Angular 11 scroll to top on route change
|
By default Angular doesn't scroll to the top of the page when you're navigating to another page. Here is a quick tip how to implement scrolling. Implement a scroll serviceAt first create a new service called ScrollTopService. On a server side (Angular Universal) we don't need this "hack" so it's limited only to a browser. import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { isPlatformBrowser } from '@angular/common';
@Injectable()
export class ScrollTopService {
constructor(
@Inject(PLATFORM_ID) private platformId: Object,
private router: Router
) {}
setScrollTop() {
if (isPlatformBrowser(this.platformId)) {
this.router.events.subscribe((event: NavigationEnd) => {
window.scroll(0, 0);
});
}
}
}
Enter fullscreen mode Exit fullscreen mode Inject service into a componentImport the service into the component. import { ScrollTopService } from '../your/path/scrolltop.service';
Enter fullscreen mode Exit fullscreen mode Then call the setScrollTop method on ngInit in your component to initialize scrolling. ngOnInit() {
this.scrollTopService.setScrollTop();
}
Enter fullscreen mode Exit fullscreen mode |
