On route change view doesn't scroll to top in the new page in angular2

Question

I have tried autoscroll="false" on the router-outlet but does't seem to work, is there any default method of angular2 for doing the same without using any third party library?

Possible duplicate of [Angular 2 Scroll to top on Route Change](http://stackoverflow.com/questions/39601026/angular-2-scroll-to-top-on-route-change) — Mark E. Haase, Dec 30 '16 at 03:19

score 8 · Answer 1 · answered Oct 26 '18 at 12:04

Until Angular 6

here is a more neat way to do it:

this.router.events.subscribe((ev:any) => {
  if (ev instanceof NavigationEnd) {
    window.scrollTo(0, 0);
  }
});

From Angular 6.1

You could do this in your router configuration. This is likely to be the norm in future versions as suggested here.

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

Pardeep Jain · Accepted Answer · 2019-08-21T11:18:17.907

7

found answer here https://stackoverflow.com/a/39601987/5043867

we can subscribe to the route change event and scroll to the top with something in the lines of

ngOnInit() {
    this.router.events.subscribe((evt) => {
        if (!(evt instanceof NavigationEnd)) {
            return;
        }
        document.body.scrollTop = 0;
    });
}

Update -

In Angular v6+ there is a new method scrollPositionRestoration introduced. for more info read out here

https://medium.com/@PardeepJain/deep-dive-into-angular-routing-scrolling-to-top-debugging-and-lot-more-a995c08498d3

edited Aug 21 '19 at 11:18

answered Oct 08 '16 at 12:03

Pardeep Jain

84,110
37
165
215

I wish there was an easier way - instead of having the code in the UI in one place it is now in the component code – Rodney Nov 06 '16 at 09:08
This is also an easier way I think we have to code once in the main app component – Pardeep Jain Nov 06 '16 at 11:34
@Pradeep Jain : This works fine if I change from one route to another however it dosen't scroll to top on param change on same route, I added this service on this._route.params.subscribe event still it remains at same position – Mr X Sep 10 '18 at 21:32
yes because for the same route this event will not trigger ,so in that case you need to change your logic depending on the changes of params too – Pardeep Jain Sep 13 '18 at 09:57

score 4 · Answer 3 · answered Aug 21 '19 at 10:24

4

Angular lately introduced a new feature, inside angular routing module make changes like below

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

answered Aug 21 '19 at 10:24

Pran R.V

1,015
12
21

score 0 · Answer 4 · answered Sep 23 '22 at 17:46

Just figured it out. It can be used as smooth scroller to precised ID or instant scroller in order to fix top position.

Component that route is driven to:

  ngAfterViewInit(): void {
    this.commonService.scrollTo('header', BEHAVIOR.auto)
  }

Service:

  scrollTo(element: string, behavior: BEHAVIOR): void {
    (document.getElementById(element) as HTMLElement).scrollIntoView({behavior: behavior, block: "start", inline: "nearest"});
  }

Enum:

export enum BEHAVIOR {
  smooth = 'smooth',
  auto = 'auto'
}

score -3 · Answer 5 · answered Oct 08 '16 at 11:13

-3

Yes, you can refer to fragments available in Angular2-router.

answered Oct 08 '16 at 11:13

micronyks

54,797
15
112
146

1

will you please elaborate your answer bit more, btw thanks for answer :) – Pardeep Jain Oct 08 '16 at 12:04

On route change view doesn't scroll to top in the new page in angular2

5 Answers5

Until Angular 6

From Angular 6.1

Linked