Make sure to explore all the options available to you :)

---

Method 1:

When a new component is instantiated in the router outlet, the activate event is emitted, allowing us to use (activate) for scrolling purposes like so:

app.component.html

<router-outlet (activate)="onActivate($event)"></router-outlet>

app.component.ts

onActivate(event) {
   // window.scroll(0,0);

   window.scroll({ 
           top: 0, 
           left: 0, 
           behavior: 'smooth' 
    });

    //or document.body.scrollTop = 0;
    //or document.querySelector('body').scrollTo(0,0)
    ...
}

If smooth scroll doesn't work well in Safari, you can try using this solution:

onActivate(event) {
    let scrollToTop = window.setInterval(() => {
        let pos = window.pageYOffset;
        if (pos > 0) {
            window.scrollTo(0, pos - 20); // how far to scroll on each step
        } else {
            window.clearInterval(scrollToTop);
        }
    }, 16);
}

---

If you only want certain components to trigger the scrolling, you can check for it in an if statement like this:

onActivate(e) {
    if (e.constructor.name === "login") { // for example
            window.scroll(0,0);
    }
}

---

Method 2:

Starting from Angular 6.1, you can also utilize

{ scrollPositionRestoration: 'enabled' }

on eagerly loaded modules to apply it to all routes:

RouterModule.forRoot(appRoutes, { scrollPositionRestoration: 'enabled' })

This method already includes smooth scrolling but will be applied to every routing which may not be suitable in all cases.

---

Method 3:

Another approach is to implement top scrolling during router animations. Include this in every transition where top scroll is desired:

query(':enter, :leave', style({ position: 'fixed' }), { optional: true }) 

If you encounter this issue in Angular 6, you can resolve it by including the parameter

scrollPositionRestoration: 'enabled'

in app-routing.module.ts under RouterModule:

@NgModule({
  imports: [RouterModule.forRoot(routes,{
    scrollPositionRestoration: 'enabled'
  })],
  exports: [RouterModule]
})

UPDATE: To address the issue in Angular 6+, I recommend following Nimesh Nishara Indimagedara's solution which involves adding the following code to your RouterModule configuration:

RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled'
});

---

Initial Response:

If you're still facing difficulties, another approach is to insert an empty HTML element (such as a div) at the top or desired scroll location with the id "top" within your template or parent template:

<div id="top"></div>

Then, in your component file:

ngAfterViewInit() {
    // Workaround: Scrolls to the top of the page after view initialization
    let top = document.getElementById('top');
    if (top !== null) {
      top.scrollIntoView();
      top = null;
    }
}

In Angular 6.1, a new feature called scrollPositionRestoration has been introduced to handle scroll position restoration automatically.

To learn more about this, you can check out my detailed explanation on the topic of scrolling to the top when routes change in Angular 2.

Upgrading to Angular Version 6+ Eliminates the Need for window.scroll(0,0)

Starting from Angular version 6+, as mentioned in the official documentation, there are new options available for configuring the router.

interface ExtraOptions {
  enableTracing?: boolean
  useHash?: boolean
  initialNavigation?: InitialNavigation
  errorHandler?: ErrorHandler
  preloadingStrategy?: any
  onSameUrlNavigation?: 'reload' | 'ignore'
  scrollPositionRestoration?: 'disabled' | 'enabled' | 'top'
  anchorScrolling?: 'disabled' | 'enabled'
  scrollOffset?: [number, number] | (() => [number, number])
  paramsInheritanceStrategy?: 'emptyOnly' | 'always'
  malformedUriErrorHandler?: (error: URIError, urlSerializer: UrlSerializer, url: string) => UrlTree
  urlUpdateStrategy?: 'deferred' | 'eager'
  relativeLinkResolution?: 'legacy' | 'corrected'
}

The usage of

scrollPositionRestoration?: 'disabled' | 'enabled' | 'top'

is illustrated below:

Example:

RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled'|'top' 
});

If manual control over scrolling is necessary, avoid using window.scroll(0,0). Instead, Angular V6 has introduced the ViewPortScoller as a common package.

abstract class ViewportScroller {
  static ngInjectableDef: defineInjectable({ providedIn: 'root', factory: () => new BrowserViewportScroller(inject(DOCUMENT), window) })
  abstract setOffset(offset: [number, number] | (() => [number, number])): void
  abstract getScrollPosition(): [number, number]
  abstract scrollToPosition(position: [number, number]): void
  abstract scrollToAnchor(anchor: string): void
  abstract setHistoryScrollRestoration(scrollRestoration: 'auto' | 'manual'): void
}

The implementation is straightforward as shown below:

import { Router } from '@angular/router';
import {  ViewportScroller } from '@angular/common'; //import
export class RouteService {

  private applicationInitialRoutes: Routes;
  constructor(
    private router: Router;
    private viewPortScroller: ViewportScroller//inject
  )
  {
   this.router.events.pipe(
            filter(event => event instanceof NavigationEnd))
            .subscribe(() => this.viewPortScroller.scrollToPosition([0, 0]));
}

While @Vega provides a direct answer to your question, there are some potential issues that arise. One such issue is the disruption of the browser's back/forward button functionality. Should a user click on either of these buttons, they may lose their current position on the page and find themselves scrolled all the way back to the top. This can be frustrating for users who have scrolled far down the page to reach a specific link, only to have their scroll position reset when navigating backward.

In response to this problem, I offer a solution below:

export class AppComponent implements OnInit {
  isPopState = false;

  constructor(private router: Router, private locStrat: LocationStrategy) { }

  ngOnInit(): void {
    this.locStrat.onPopState(() => {
      this.isPopState = true;
    });

    this.router.events.subscribe(event => {
      // Scroll to top if accessing a page, not via browser history stack
      if (event instanceof NavigationEnd && !this.isPopState) {
        window.scrollTo(0, 0);
        this.isPopState = false;
      }

      // Ensures that isPopState is reset
      if (event instanceof NavigationEnd) {
        this.isPopState = false;
      }
    });
  }
}

If you are using mat-sidenav, make sure to assign an id to the router outlet (especially if you have parent and child router outlets) and include the activate function within it:

<router-outlet id="main-content" (activate)="onActivate($event)">

To scroll to the top, utilize the 'mat-sidenav-content' query selector like so:

onActivate(event) {
    document.querySelector("mat-sidenav-content").scrollTo(0, 0);
  }

To implement this feature, simply include the following line in your app.module.ts file :

RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled' //scroll to the top
})

This solution has been tested and proven effective with Angular 11.1.4

For my situation, I simply included

window.scrollTop(0, 0);

inside the ngOnInit() function and it is functioning perfectly.

For Angular versions 6.1 and above:

In newer versions of Angular such as Angular 6.1+, there is a built-in solution that can be used with the option

scrollPositionRestoration: 'enabled'

to achieve the same functionality.

@NgModule({
  imports: [RouterModule.forRoot(routes,{
    scrollPositionRestoration: 'enabled'
  })],
  exports: [RouterModule]
})

For Angular versions 6.0 and prior:

import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart, NavigationEnd } from '@angular/router';
import { Location, PopStateEvent } from "@angular/common";

@Component({
    selector: 'my-app',
    template: '<ng-content></ng-content>',
})
export class MyAppComponent implements OnInit {

    private lastPoppedUrl: string;
    private yScrollStack: number[] = [];

    constructor(private router: Router, private location: Location) { }

    ngOnInit() {
        this.location.subscribe((ev:PopStateEvent) => {
            this.lastPoppedUrl = ev.url;
        });
        this.router.events.subscribe((ev:any) => {
            if (ev instanceof NavigationStart) {
                if (ev.url != this.lastPoppedUrl)
                    this.yScrollStack.push(window.scrollY);
            } else if (ev instanceof NavigationEnd) {
                if (ev.url == this.lastPoppedUrl) {
                    this.lastPoppedUrl = undefined;
                    window.scrollTo(0, this.yScrollStack.pop());
                } else
                    window.scrollTo(0, 0);
            }
        });
    }
}

Note: The expected behavior is for the page to remain scrolled down to the same position when navigating back, but scroll to the top when arriving at a new page.

None of the previous solutions worked for me, so I took a different approach. I inserted an element reference to the top element in app.component.html, and added (activate)=onNavigate($event) to the router-outlet.

<!--app.component.html-->
<div #topScrollAnchor></div>
<app-navbar></app-navbar>
<router-outlet (activate)="onNavigate($event)"></router-outlet>

Next, I defined the child in app.component.ts as type ElementRef, and implemented code that scrolls to it upon activation of the router-outlet.

export class AppComponent  {
  @ViewChild('topScrollAnchor') topScroll: ElementRef;

  onNavigate(event): any {
    this.topScroll.nativeElement.scrollIntoView({ behavior: 'smooth' });
  }
}

For the full implementation, you can view the code on stackblitz

If you need to implement a scroll function, simply add this code snippet and call it whenever necessary:

scrollTop(){

  window.scroll(0,0);
}

Simply Include

 ngAfterViewInit() {
  window.scroll(0,0)
 }

As I continue my search for a pre-existing solution to this issue similar to what AngularJS offers, I have found that the following workaround gets the job done for now. It's straightforward and maintains the functionality of the back button.

app.component.html

<router-outlet (deactivate)="onDeactivate()"></router-outlet>

app.component.ts

onDeactivate() {
  document.body.scrollTop = 0;
  // Alternatively, you can scroll to top by using this other call:
  // window.scrollTo(0, 0)
}

Response courtesy of zurfyx original post

All you have to do is develop a custom function that adjusts the scrolling behavior of your screen.

For instance:

window.scroll(0,0) OR window.scrollTo() by providing the correct parameters.

Expected parameter for window.scrollTo(xpos, ypos).

I found a solution that worked perfectly for my situation:

document.querySelector('.container')[0].scrollTo(0, 0);

This code snippet has successfully scrolled to the top in various versions of angular such as 8, 9, and 10.

simply include

window.scrollTo({ top: 0 });

in the ngOnInit() method

If you want a solution that only scrolls to the top of each Component when it is visited for the first time, you can implement the following:

Within each Component:

export class MyComponent implements OnInit {

firstVisit: boolean = true;

...

ngOnInit() {

  if(this.firstVisit) {
    window.scroll(0,0);
    this.firstVisit = false;
  }
  ...
}

Give this a shot:

main.component.ts

import {Component, OnInit, OnDestroy} from '@angular/core';
import {Router, NavigationEnd} from '@angular/router';
import {filter} from 'rxjs/operators';
import {Subscription} from 'rxjs';

@Component({
    selector: 'main-app',
    templateUrl: './main.component.html',
    styleUrls: ['./main.component.scss'],
})
export class MainComponent implements OnInit, OnDestroy {
    sub: Subscription;

    constructor(private routerService: Router) {
    }

    ngOnInit() {
        this.sub = this.routerService.events.pipe(
            filter(event => event instanceof NavigationEnd)
        ).subscribe(() => window.scrollTo(0, 0));
    }

    ngOnDestroy() {
        this.sub.unsubscribe();
    }
}

<p class="text-center" (click)="scrollToTop()"> Return to the beginning
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-short" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z"/>
</svg>
</p>


scrollToTop(): void {
window.scroll(0, 0);
}

Enhancement: Instead of triggering an action in the template and scrolling on NavigationEnd, subscribe to all routing events to ensure smooth scroll only on successful navigation. This method prevents unnecessary firing of actions on bad navigations or blocked routes.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {

  router$: Subscription;

  constructor(private router: Router) {}

  ngOnInit() {
    this.router$ = this.router.events.subscribe(next => this.onRouteUpdated(next));
  }

  ngOnDestroy() {
    if (this.router$ != null) {
      this.router$.unsubscribe();
    }
  }

  private onRouteUpdated(event: any): void {
    if (event instanceof NavigationEnd) {
      this.smoothScrollTop();
    }
  }

  private smoothScrollTop(): void {
    const scrollToTop = window.setInterval(() => {
      const pos: number = window.pageYOffset;
      if (pos > 0) {
          window.scrollTo(0, pos - 20); // define scroll distance per step
      } else {
          window.clearInterval(scrollToTop);
      }
    }, 16);
  }

}

HTML

<router-outlet></router-outlet>

give this a shot

@NgModule({
  imports: [RouterModule.forRoot(routes,{
    scrollPositionRestoration: 'top'
  })],
  exports: [RouterModule]
})

this snippet is compatible with Angular versions 6 and above