Angular 6.1 and later:

Angular 6.1 (released on 2018-07-25) added built-in support to handle this issue, through a feature called "Router Scroll Position Restoration". As described in the official Angular blog, you just need to enable this in the router configuration like this:

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

Furthermore, the blog states "It is expected that this will become the default in a future major release". So far this hasn't happened (as of Angular 7.x), but eventually you won't need to do anything at all in your code, and this will just work correctly out of the box.

Angular 6.0 and earlier:

While @GuilhermeMeireles's excellent answer fixes the original problem, it introduces a new one, by breaking the normal behavior you expect when you navigate back or forward (with browser buttons or via Location in code). The expected behavior is that when you navigate back to the page, it should remain scrolled down to the same location it was when you clicked on the link, but scrolling to the top when arriving at every page obviously breaks this expectation.

The code below expands the logic to detect this kind of navigation by subscribing to Location's PopStateEvent sequence and skipping the scroll-to-top logic if the newly arrived-at page is a result of such an event.

If the page you navigate back from is long enough to cover the whole viewport, the scroll position is restored automatically, but as @JordanNelson correctly pointed out, if the page is shorter you need to keep track of the original y scroll position and restored it explicitly when you go back to the page. The updated version of the code covers this case too, by always explicitly restoring the scroll position.

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);

            }

        });

    }

}

From Angular 6.1, you can now avoid the hassle and pass extraOptions to your RouterModule.forRoot() as a second parameter and can specify scrollPositionRestoration: enabled to tell Angular to scroll to top whenever the route changes.

By default you will find this in app-routing.module.ts:

const routes: Routes = [

  {

    path: '...'

    component: ...

  },

  ...

];



@NgModule({

  imports: [

    RouterModule.forRoot(routes, {

      scrollPositionRestoration: 'enabled', // Add options right here

    })

  ],

  exports: [RouterModule]

})

export class AppRoutingModule { }

Angular Official Docs

You can write this more succinctly by taking advantage of the observable filter method:

this.router.events.filter(event => event instanceof NavigationEnd).subscribe(() => {

      this.window.scrollTo(0, 0);

});

If you're having issues scrolling to the top when using the Angular Material 2 sidenav this will help. The window or document body won't have the scrollbar so you need to get the sidenav content container and scroll that element, otherwise try scrolling the window as a default.

this.router.events.filter(event => event instanceof NavigationEnd)

  .subscribe(() => {

      const contentContainer = document.querySelector('.mat-sidenav-content') || this.window;

      contentContainer.scrollTo(0, 0);

});

Also, the Angular CDK v6.x has a scrolling package now that might help with handling scrolling.

If you have server side rendering, you should be careful not to run the code using windows on the server, where that variable doesn't exist. It would result in code breaking.

export class AppComponent implements OnInit {

  routerSubscription: Subscription;



  constructor(private router: Router,

              @Inject(PLATFORM_ID) private platformId: any) {}



  ngOnInit() {

    if (isPlatformBrowser(this.platformId)) {

      this.routerSubscription = this.router.events

        .filter(event => event instanceof NavigationEnd)

        .subscribe(event => {

          window.scrollTo(0, 0);

        });

    }

  }



  ngOnDestroy() {

    this.routerSubscription.unsubscribe();

  }

}

isPlatformBrowser is a function used to check if the current platform where the app is rendered is a browser or not. We give it the injected platformId.

It it also possible to check for existence of variable windows, to be safe, like this:

if (typeof window != 'undefined')

just do it easy with click action

in your main component html make reference #scrollContainer

<div class="main-container" #scrollContainer>

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

</div>

in main component .ts

onActivate(e, scrollContainer) {

    scrollContainer.scrollTop = 0;

}

The best answer resides in the Angular GitHub discussion (Changing route doesn't scroll to top in the new page).

Maybe you want go to top only in root router changes (not in children,
because you can load routes with lazy load in f.e. a tabset)

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)

}

Full credits to JoniJnm (original post)

You can add the AfterViewInit lifecycle hook to your component.

ngAfterViewInit() {

   window.scrollTo(0, 0);

}

Here's a solution that I've come up with. I paired up the LocationStrategy with the Router events. Using the LocationStrategy to set a boolean to know when a user's currently traversing through the browser history. This way, I don't have to store a bunch of URL and y-scroll data (which doesn't work well anyway, since each data is replaced based on URL). This also solves the edge case when a user decides to hold the back or forward button on a browser and goes back or forward multiple pages rather than just one.

P.S. I've only tested on the latest version of IE, Chrome, FireFox, Safari, and Opera (as of this post).

Hope this helps.

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 need simply scroll page to top, you can do this (not the best solution, but fast)

document.getElementById('elementId').scrollTop = 0;

This solution is based on @FernandoEcheverria's and @GuilhermeMeireles's solution, but it is more concise and works with the popstate mechanisms that the Angular Router provides. This allows for storing and restoring the scroll level of multiple consecutive navigations.

We store the scroll positions for each navigation state in a map scrollLevels. Once there is a popstate event, the ID of the state that is about to be restored is supplied by the Angular Router: event.restoredState.navigationId. This is then used to get the last scroll level of that state from scrollLevels.

If there is no stored scroll level for the route, it will scroll to the top as you would expect.

import { Component, OnInit } from '@angular/core';

import { Router, NavigationStart, NavigationEnd } from '@angular/router';



@Component({

    selector: 'my-app',

    template: '<ng-content></ng-content>',

})

export class AppComponent implements OnInit {



  constructor(private router: Router) { }



  ngOnInit() {

    const scrollLevels: { [navigationId: number]: number } = {};

    let lastId = 0;

    let restoredId: number;



    this.router.events.subscribe((event: Event) => {



      if (event instanceof NavigationStart) {

        scrollLevels[lastId] = window.scrollY;

        lastId = event.id;

        restoredId = event.restoredState ? event.restoredState.navigationId : undefined;

      }



      if (event instanceof NavigationEnd) {

        if (restoredId) {

          // Optional: Wrap a timeout around the next line to wait for

          // the component to finish loading

          window.scrollTo(0, scrollLevels[restoredId] || 0);

        } else {

          window.scrollTo(0, 0);

        }

      }



    });

  }



}

As of Angular 6.1, the router provides a configuration option called scrollPositionRestoration, this is designed to cater for this scenario.

imports: [

  RouterModule.forRoot(routes, {

    scrollPositionRestoration: 'enabled'

  }),

  ...

]

for iphone/ios safari you can wrap with a setTimeout

setTimeout(function(){

    window.scrollTo(0, 1);

}, 0);

Hi guys this works for me in angular 4. You just have to reference the parent to scroll on router change`

layout.component.pug

.wrapper(#outlet="")

    router-outlet((activate)='routerActivate($event,outlet)')

layout.component.ts

 public routerActivate(event,outlet){

    outlet.scrollTop = 0;

 }`

@Fernando Echeverria
great! but this code not work in hash router or lazy router. because they do not trigger location changes.
can try this:

private lastRouteUrl: string = 

  



ngOnInit(): void {

  this.router.events.subscribe((ev) => {

    const len = this.lastRouteUrl.length

    if (ev instanceof NavigationEnd) {

      this.lastRouteUrl.push(ev.url)

      if (len > 1 && ev.url === this.lastRouteUrl[len - 2]) {

        return

      }

      window.scrollTo(0, 0)

    }

  })

}

Using the Router itself will cause issues which you cannot completely overcome to maintain consistent browser experience. In my opinion the best method is to just use a custom directive and let this reset the scroll on click. The good thing about this, is that if you are on the same url as that you click on, the page will scroll back to the top as well. This is consistent with normal websites. The basic directive could look something like this:

import {Directive, HostListener} from '@angular/core';



@Directive({

    selector: '[linkToTop]'

})

export class LinkToTopDirective {



    @HostListener('click')

    onClick(): void {

        window.scrollTo(0, 0);

    }

}

With the following usage:

<a routerLink="/" linkToTop></a>

This will be enough for most use-cases, but I can imagine a few issues which may
arise from this:

• Doesn't work on universal because of the usage of window
  


• Small speed impact on change detection, because it is triggered by every click


• No way to disable this directive

It is actually quite easy to overcome these issues:

@Directive({

  selector: '[linkToTop]'

})

export class LinkToTopDirective implements OnInit, OnDestroy {



  @Input()

  set linkToTop(active: string | boolean) {

    this.active = typeof active === 'string' ? active.length === 0 : active;

  }



  private active: boolean = true;



  private onClick: EventListener = (event: MouseEvent) => {

    if (this.active) {

      window.scrollTo(0, 0);

    }

  };



  constructor(@Inject(PLATFORM_ID) private readonly platformId: Object,

              private readonly elementRef: ElementRef,

              private readonly ngZone: NgZone

  ) {}



  ngOnDestroy(): void {

    if (isPlatformBrowser(this.platformId)) {

      this.elementRef.nativeElement.removeEventListener('click', this.onClick, false);

    }

  }



  ngOnInit(): void {

    if (isPlatformBrowser(this.platformId)) {

      this.ngZone.runOutsideAngular(() => 

        this.elementRef.nativeElement.addEventListener('click', this.onClick, false)

      );

    }

  }

}

This takes most use-cases into account, with the same usage as the basic one, with the advantage of enable/disabling it:

<a routerLink="/" linkToTop></a> <!-- always active -->

<a routerLink="/" [linkToTop]="isActive"> <!-- active when `isActive` is true -->

commercials, don't read if you don't want to be advertised

Another improvement could be made to check whether or not the browser supports passive events. This will complicate the code a bit more, and is a bit obscure if you want to implement all these in your custom directives/templates. That's why I wrote a little library which you can use to address these problems. To have the same functionality as above, and with the added passive event, you can change your directive to this, if you use the ng-event-options library. The logic is inside the click.pnb listener:

@Directive({

    selector: '[linkToTop]'

})

export class LinkToTopDirective {



    @Input()

    set linkToTop(active: string|boolean) {

        this.active = typeof active === 'string' ? active.length === 0 : active;

    }



    private active: boolean = true;



    @HostListener('click.pnb')

    onClick(): void {

      if (this.active) {

        window.scrollTo(0, 0);

      }        

    }

}

This worked for me best for all navigation changes including hash navigation

constructor(private route: ActivatedRoute) {}



ngOnInit() {

  this._sub = this.route.fragment.subscribe((hash: string) => {

    if (hash) {

      const cmp = document.getElementById(hash);

      if (cmp) {

        cmp.scrollIntoView();

      }

    } else {

      window.scrollTo(0, 0);

    }

  });

}

The main idea behind this code is to keep all visited urls along with respective scrollY data in an array. Every time a user abandons a page (NavigationStart) this array is updated. Every time a user enters a new page (NavigationEnd), we decide to restore Y position or don't depending on how do we get to this page. If a refernce on some page was used we scroll to 0. If browser back/forward features were used we scroll to Y saved in our array. Sorry for my English :)

import { Component, OnInit, OnDestroy } from '@angular/core';

import { Location, PopStateEvent } from '@angular/common';

import { Router, Route, RouterLink, NavigationStart, NavigationEnd, 

    RouterEvent } from '@angular/router';

import { Subscription } from 'rxjs/Subscription';



@Component({

  selector: 'my-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit, OnDestroy {



  private _subscription: Subscription;

  private _scrollHistory: { url: string, y: number } = ;

  private _useHistory = false;



  constructor(

    private _router: Router,

    private _location: Location) {

  }



  public ngOnInit() {



    this._subscription = this._router.events.subscribe((event: any) => 

    {

      if (event instanceof NavigationStart) {

        const currentUrl = (this._location.path() !== '') 

           this._location.path() : '/';

        const item = this._scrollHistory.find(x => x.url === currentUrl);

        if (item) {

          item.y = window.scrollY;

        } else {

          this._scrollHistory.push({ url: currentUrl, y: window.scrollY });

        }

        return;

      }

      if (event instanceof NavigationEnd) {

        if (this._useHistory) {

          this._useHistory = false;

          window.scrollTo(0, this._scrollHistory.find(x => x.url === 

          event.url).y);

        } else {

          window.scrollTo(0, 0);

        }

      }

    });



    this._subscription.add(this._location.subscribe((event: PopStateEvent) 

      => { this._useHistory = true;

    }));

  }



  public ngOnDestroy(): void {

    this._subscription.unsubscribe();

  }

}

window.scrollTo() doesn't work for me in Angular 5, so I have used document.body.scrollTop like,

this.router.events.subscribe((evt) => {

   if (evt instanceof NavigationEnd) {

      document.body.scrollTop = 0;

   }

});