Angular: Changing route doesn't scroll to top in the new page

Created on 28 Mar 2016  ·  103Comments  ·  Source: angular/angular

When navigating from one route to another then scrolling down a bit and navigate back to the previous route, the page remains at the same scroll position.

Current behavior

Navigate from one view to another then scroll down a bit and navigate back to the previous view. the page remains at the same scroll position.

Expected/desired behavior

When navigating back to another route the page should be scrolled to the top.

router feature high google obvious

Most helpful comment

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)

Another way to solve it:

<router-outlet (deactivate)="onDeactivate()"></router-outlet>
onDeactivate() {
    document.body.scrollTop = 0;
}

All 103 comments

dup of #6595 ?

dup of #6595 ?

I don't think so.

6946 shows a workaround

Expected/desired behavior

When navigating back to another route the page should be scrolled to the top.

It isn't expected behaviour for me. Expected behaviour for me is:

When navigating back to another route the page should be scrolled to position at which it was before going forward. This is the behaviour currently implemented in all browsers when navigating between normal pages (not SPA). But I never seen this behaviour in any implementation of angular1 router.

It is very annoying when you scroll down some list, click on list item to see details page, scrolling down details, then click browser Back button and not see the list page in exactly the same state as it was before.

  • If it not scrolls at all: you just end up in random scroll position on the list page.
  • If it scrolls to the top: it's better, but you end up always at top of the list page, while in any "normal" site (not SPA) you end up at scroll position at which you were been before going to detail page.

The github, for example, implements this correctly: Open issues list and scroll down, then open any issue details, then click Back browser button. You will end up at exactly the same scroll position at which you were been before opening issue details page.

It will be very cool if angular2 router able to do it. It is really a killer feature I never seen in any other routers.

Edit
There is dedicated issue for this behaviour now https://github.com/angular/angular/issues/10929

may be would be better ta have some attribute or param to change this default scroll behaviour?

Is there a recommended method for scrolling to the top in RC.4? The suggested workaround in #6946 no longer works.

@andyrue I don't think this would be recommended but I posted an update on #6946

In my case the window.scrollTo(0, 0) trick wouldn't work because I actually need to scroll to the top of an overflowing router-outlet. If you have a similar issue this is what I did as a workaround:

@Component({
  template: '<router-outlet (activate)="onActivate($event, outlet)" #outlet></router-outlet>,
})
export class MyParentComponent {
  onActivate(e, outlet){
    outlet.scrollTop = 0;
  }
}

Any solution? None of the proposed solutions work.
This seems to be working for me-for how long, not sure:

ngAfterViewChecked() {
window.scrollTo(0, 0);
}

@Ariix wouldn't that scroll after every time change detection runs?

@Cortopy Yes, yes it does. So still looking

Any update or milestone for this?

Any update on this? Its annoying when you scroll down some list, click a list item to see details (which is on another route) you have to scroll up. If the next details page's length is small and the list page is very long and by chance you clicked the last item in the list. It would give an impression that there aren't any contents on details page (as the user has to scroll up to view contents).

@zoechi I believe that comment is about URL with hash, in my case I don't' have any hash:

List page has a url:
/list

details page has a url:
/details/123

@naveedahmed1 you can still call scrollIntoView() or scrollTop=0

@zoechi - Can you share the full code? i have parent child scenario where child routes are changing

My work around involves the ElementRef class.

  constructor(
    private route: ActivatedRoute,
    private service: GuideService,
    private router: Router,
    private element: ElementRef
  ) {
    this.scrollUp = this.router.events.subscribe((path) => {
      element.nativeElement.scrollIntoView();
    });
  }

How about this?

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

@Component({
    moduleId: module.id,
    selector: 'app',
    templateUrl: './app.component.html'
})

export class AppComponent implements OnInit {
    constructor(private router: Router) {}

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

            var scrollToTop = window.setInterval(function () {
                var pos = window.pageYOffset;
                if (pos > 0) {
                    window.scrollTo(0, pos - 20); // how far to scroll on each step
                } else {
                    window.clearInterval(scrollToTop);
                }
            }, 16); // how fast to scroll (this equals roughly 60 fps)
        });
    }
}
    router.events.filter(event => event instanceof NavigationEnd).subscribe(event => {
        window.scroll(0, 0);
    });

This seems to remember the scroll position (in Chrome and Firefox but not IE), but I have no idea why.

@SmaugTheGreat Yes, that does work! But how is that even possible that it remembers the last scroll position?

Its strange, when using @SmaugTheGreat solution i.e. window.scroll(0, 0); it remembers scroll position.
But when using it window.scroll in window.setInterval, it doesn't remember scroll position.

why doesn't NavigationEnd contain params, query params etc of the route? only string?

A mixture of Smaugs solution above and Guilherme Meireles on stackoverflow does the trick for me. Also unsubscribing in ngOnDestroy to avoid leakage.

import { Component } from '@angular/core'; 
import { Router, NavigationEnd } from '@angular/router'; 
import { Subscription } from 'rxjs/Rx';

@Component({
    moduleId: module.id, 
    selector: ‘my-app’,
    template: `<router-outlet></router-outlet>`
})

export class AppComponent {
    routerSubscription: Subscription;

    constructor(private router: Router) {}

    ngOnInit() {
        this.routerSubscription = this.router.events
            .filter(event => event instanceof NavigationEnd)
            .subscribe(event => {
                document.body.scrollTop = 0;
            });
    }

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

use 'ng2-page-scroll' module. As a quick response, i am posting one of my component. This one worked for me.

import {Component, OnInit, Inject } from '@angular/core';
import {Router, Route, NavigationEnd} from '@angular/router';
import { AppSharedService} from '../app.service';
import { DOCUMENT } from '@angular/platform-browser';
import { Subscription } from 'rxjs/Rx';
import { PageScrollService, PageScrollInstance } from 'ng2-page-scroll';

@Component({
selector: 'app-resources',
templateUrl: './resources.component.html',
styleUrls: ['./resources.component.scss']
})
export class ResourcesComponent {

routerSubscription: Subscription;

constructor(private router: Router, private SharedService: AppSharedService, private pageScrollService: PageScrollService, @Inject(DOCUMENT) private document: any,) {
let pageScrollInstance: PageScrollInstance = PageScrollInstance.simpleInstance(this.document, '#app-give');
this.pageScrollService.start(pageScrollInstance);

}

}

@shanehickeylk
I believe you only need to unsubscribe because you specifically save the subscription into a variable.

If you just called router.events..... .subscribe() directly, there is no subscription to unsubscribe.

Update: yes you do :) sorry guys

@spock123
I believe that the subscription is still "alive" even when it is not assigned to a variable. This is how angular knows an event has been triggered. The reason for assigning it to a variable is so that it can be accessed later and unsubscribed.

Here is a good article by Brian Love, where he goes into some additional detail on the topic:
http://brianflove.com/2016/12/11/anguar-2-unsubscribe-observables/

Aight, thanks.. need to rewrite some production asap ,😎😎

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)

Another way to solve it:

<router-outlet (deactivate)="onDeactivate()"></router-outlet>
onDeactivate() {
    document.body.scrollTop = 0;
}

Just want to report that I see this issue whenever I use a route resolver. Looks like it has to do with the timing of a component being destroyed/loaded in the router. When I use a resolver, seems the component loads really fast, too fast, and its like the router outlet is never truly empty or something so the scroll position gets saved from previous component. On all my other routes/components, however, this is not an issue

I solved this issue by adding autoscroll="true" in the ui-view

josh81, what you said is for angular 1, not angular 2

@JoniJnm maybe using the renderer would be better?

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

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

```export class AppComponent {

constructor(private renderer: Renderer) {
}

onDeactivate() {
this.renderer.setElementProperty(document.body, "scrollTop", 0);
}
}
```

I added this to my app.component::ngOnInit to get around scrolling issues after routing where native scrolling on the window or document body wasn't working due to the content being in the sidenav content container. In case this helps anyone temporarily until beta.4.

this.router
  .events
  .filter(event => event instanceof NavigationEnd)
  .subscribe(() => {
      const contentContainer = document.querySelector('.mat-sidenav-content') || this.window;
      contentContainer.scrollTo(0, 0);
  });

I created a little service that handles this :

Tutorial

Source

@kormic using the Renderer is a good idea! However, Renderer is deprecated, so Renderer2 should be used now. Also setElementProperty() was changed to setProperty() in Renderer2.

I combined this with @kormic and @mtpultz's workarounds and this seems to be working fairly well for me atm:

    this.router.events.filter(event => event instanceof NavigationEnd).subscribe(() => {
      this.renderer.setProperty(document.body, 'scrollTop', 0);
    });

@Splaktar i have a angular universal app. how to avoid the server exception.
the 3 way works but i have a server message, :

window.scrollTo(0,0); //window not defined.
this.element.nativeElement.scrollIntoView(false); //scrollIntoView not defined
this.renderer.setProperty(document.body,'scrollTop',0); //document not defined

After an hours of work finally found a solution for server side rendering

if (isPlatformBrowser(this.platformId)) {
                var scrollingElement = this.document.scrollingElement || this.document.documentElement;
                this.renderer.setProperty(scrollingElement ,'scrollTop',0);
            }

FYI, anyone who cares about this probably also cares about preserving scroll position for previous views when navigating "Back". That is in a separate issue #10929.

My question is how is this combined with #hash anchors not supported out of the box and not known after like 10 iterations of routers in Angular?

  1. When I click on a link it should scroll to the top.
  2. If I click on a link and it has a # it should go to that page and scroll to it, or if it's the same page scroll down to it.
  3. If I hit back or forward, it should go to where I was.

This isn't hard. I thought this was solved in like 1992. Someone at Google please get into a stand-up and knock heads. This needs to be fixed yesterday. I shouldn't have to write hacks just to do what every browser since Lynx has been able to do.

app.component.ts,add following code
this.router.events.filter(event => event instanceof NavigationEnd).subscribe((e: NavigationEnd) => {
document.body.scrollTop = 0;
});

That amongst other things doesn't work properly with # notation on pages etc. This needs to be fixed properly by the Angular team in the root code per the requirements above.

This really needs to be the expected behaviour in SPAs. We are trying a workaround for our production app and it really supposed to be out of the box solution.

I would agree with most of the prior comments: since my application isn't in Production yet I'm holding off hoping this will be implemented without any workarounds needed.

The autoscroll no longer works in Firefox :-/
55.0.1 (64 bit)

Chrome works as expected though.

this works for me
let number = window.scrollY || window.pageYOffset || document.body.scrollTop + (document.documentElement && document.documentElement.scrollTop || 0)

My team has been using what the angular team uses on this repo on angular.io. Just make a service and inject it like usual. Then, on ngAfterViewInit or ngAfterContentInit on each page you want this behavior, just call this.[scroll service variable name].scrollToTop(). Finally, you'll need to add this to the top of <body> in index.html: <div id="top-of-page"></div>

I just used
this.router.navigate(['myNextPage']).then(() => { window.scrollTo(0, 0) });

and it worked.

Again, that's isn't what it's supposed to do.

If you go to a regular old website and hit the back button it goes back AND keeps the exact position on the page where you clicked from so you're brought back to EXACTLY where you left off.

Angular needs to have this built in and it needs to just work. No hacking, no providing a bad estimation of the functionality. The real deal working exactly as a user would expect automatically.

Simply add this in your main component

constructor(private router: Router) {
    this.router.events.subscribe(
      () => window.scrollTo(0, 0)
    );
  }

This works for me:

<router-outlet (deactivate)="onDeactivate()"></router-outlet>
onDeactivate() {
    window.scrollTo(0, 0);
}

@JohnGalt1717 what you see for old websites is handled by the browser. it's quite different for a framework like angular. angular has to make use of javascript to handle the problem, which may be impossible to get a consistent and clean solution. All the other frameworks have the same problem. The only easy way to solve the problem out there is hide the element instead of destroy them when switching routes, then the browser will do the restore scroll position thing.

@crysislinux It's actually pretty trivial. In the history buffer where they intercept the back button and renavigate they also need to store the scroll position and when back /forward is hit, they scroll to that position after the ngOnInit() is complete.

except that you can't exactly do it on ngOnInit, since not all (say async) data might be rendered yet

since ngOnInit allows async (promises) you can. If the developer doesn't do it right that's not your problem that's theirs for doing it wrong.

I hope that you guys thought of restoring every single scrollable div I have on the page that has disappeared, that might load data asynchronously, that includes images, after I rotated my device in landscape.

There is nothing trivial about this... I am surprised nobody came up with a plugin so far. You would become famous instantly. In the mean time, just scroll to the top :-)

Best solution I came with from usability side of it (at least in Chrome) is to do window.scroll manually right in places where I do forward navigation in that way:

this.router.navigate(['/payment']).then(() => {
  window.scroll(0, 0); // should be here, in promise
});

In that case Chrome correctly restores scroll position if I navigate back and resets position if I navigate forward (but yes, you need to do it manually everywhere, or wrap into some kind of own method for navigation, not found another solution).

Just broadcasting that @kormic 's solution importing the Renderer object from the @angular/core library triggered by the onDeactivate() function within the app.component.ts file is still working for my Angular 4 project, built with [email protected].

This work for me:
https://stackoverflow.com/questions/39601026/angular-2-scroll-to-top-on-route-change

In your component:

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

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

    ngOnInit() {
        this.router.events.subscribe((evt) => {
            if (!(evt instanceof NavigationEnd)) {
                return;
            }
            window.scrollTo(0, 0)
        });
    }
}

I upgraded to Angular 5 and none of these worked. In fact, it seemed like none of my DOM calls worked at all (e.g. window.scrollTo(0, 0) ).

Simple solution would be adding window.scrollTo(0,0) inside ngOnInit on the required component.
```javascript
ngOnInit() {
window.scrollTo(0, 0);
}

@ericmartinezr thank you for the update. I'm using Angular Material (MatSidenav specifically) which is why calls to window and body weren't working. (e.g. they weren't scrollable). Everything worked once I called it on the appropriate DOM element (e.g. .mat-sidenav-content). I just assumed that elements body and window would be scrollable since they were parents of .mat-sidenav-content.

When navigating back to another route the page should be scrolled to position at which it was before going forward. This is the behaviour currently implemented in all browsers when navigating between > normal pages (not SPA). But I never seen this behaviour in any implementation of angular1 router.

@xak2000 raises a great point, but the behavior I am seeing is that the scroll position is mainted regardless if it is a "back" action, or a navigation to an entirely new page. I'm fine with keeping the scroll position for back actions, but seems like a bug for navigating to a new page.

thank @naveedahmed1 ; it worked very nice

same as @bobrosoft scrolling when the promise resolve was the best solution for me

furthermore to chrome, it works in safari too

@naveedahmed1 thanks ^_^

window.scrollTo() works, but what's happen if you use universal where any DOM object exists?

@marticrespi There's no concept of scroll position on the server so just wrap the scrollTo code in a isPlatformBrowser check.

Here's my solution...

Edit: I should have mentioned that this answers the question of how to reset the scroll bar back to the top when changing routes. Also, it ensures that the browser's back and forward buttons aren't broken. Meaning, when you click back or forward, the scroll bar is set back to the position when you had initially left the page. Also, there's an edge case where if you click and hold the back or forward browser buttons everything works, unlike the other answers I've seen so far. Really 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;
          }
        });
      }
    }

@sal-vader It works nicely, thanks

it's worked nicely thank you ;)

This is still broken in rc4

I solved this issue by simply adding

constructor(private router: Router) { this.router.events.subscribe( () => window.scrollTo(0, 0) ); }
in app.component.ts (where I have top router-outlet), that's it

the above solution works fine in many devices but as I checked it does not work on mobile devices. the following solution is what I Used to solve this issue in different kind of devices. At first I checked for mobile device in the constructer of app.component

if (isPlatformBrowser(this.platformId)) {
if (window.screen.width <= 1024) {
this.mobile = true;
}

and then in ngOnInit

if (isPlatformBrowser(this.platformId)) {
this.routerSubscription = this.router.events
.filter(event => event instanceof NavigationEnd)
.subscribe(event => {
if (this.mobile) {
const element = document.querySelector('#scrollId1');
element.scrollIntoView();
} else {
window.scrollTo(0, 0);
}
});
}

also you can merge all of that in ngOnInit or constructor.
note that you should set the id of the most upper div to scrollId1 to work for mobile devices.

In my case the above solutions weren't working, I checked on the console and I found out that the scrollTo() method of the window wasn't working, so I found another solution, instead of bringing the user at the position 0,0 of the page I used the scrollIntoView() method, bringing the top component of the page (in my case app-website-nav) into a view, and, It works!!!! now every time that the URL changes the view will go at the top of the page where my app-website-nav component is!
here the code, simple and works:

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

constructor(private router: Router)

ngOnInit()
   {
     this.router.events.subscribe((evt) => {
                 if (!(evt instanceof NavigationEnd)) {
                     return;
                 }
                 document.getElementsByTagName("app-website-nav")[0].scrollIntoView();
             });
   }

for smooth scrolling with router change you can use

  constructor(private router: Router) {}

  ngOnInit() {
    this.router.events.subscribe(() =>
      window.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth'
      })
    );
  }

@mkhan004 interesting but may I ask, behavior is not browser native right (https://www.w3schools.com/jsref/met_win_scrollto.asp)?

therefore are you using a special lib/polyfill which override window.scrollTo or something else?

@peterpeterparker It is native browser behavior. Word of advice - don't use W3Schools, it is known for imprecise or just plain wrong information. It's better to use MDN; a relevant page here: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

@mgol thx 👍

Worth mentioning: behavior: 'smooth' is not supported by IE or Edge.

Current versions of Chrome and Firefox seem to work though.

@MartinMa That's a good point; the relevant Can I Use page is https://caniuse.com/#feat=css-scroll-behavior

Note that even just omitting behavior: 'smooth' will still break IE/Edge/Safari as they don't support the object syntax to scrollTo, just the positional one: scrollTo(x, y). To support both of them with Chrome/Firefox getting smooth scroll and others non-smooth scroll, you can use the following logic (with the desired x/y values):

if ('scrollBehavior' in document.documentElement.style) {
  window.scrollTo({
    behavior: 'smooth',
    left: x,
    top: y,
  });
} else {
  window.scrollTo(x, y);
}

so what's the best option to fix this issue?

Closing based on being fixed as above.

use window.scrollTo(0,0); in ngOnit. So it should look like this
ngOnInit() { window.scrollTo(0,0); }

just have a look at Angular 6.1. It was fixed, and probably in a future release, it will be default

here is the best solution!!!

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

@Component({
selector: 'sv-app',
template: ''
})
export class AppComponent {

constructor(private router: Router) {

router.events
  .filter(event => event instanceof NavigationEnd)
  .subscribe((event: NavigationEnd) => {
    window.scroll(0, 0);
  });

}
}

A workaround is to put this in application.run() - at least in an old version of Angular. Might help someone!

```
var interval = setInterval(function() {
if (document.readyState === 'complete') {
$window.scrollTo(0, 0);
clearInterval(interval);
}
}, 10);

@JamieFarrelly an official solution has been released in angular 6.1

router: implement scrolling restoration service (#20030) (49c5234), closes #13636 #10929 #7791 #6595

@see documentation:

[edit] so in your case:

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

This won't work with Angular Material <mat-sidenav-container fullscreen>, I think that's because the scrolling container is now <mat-sidenav-content> and not the document body. Is there a way to fix this?

@odahcam I'm using MatDrawerContainer and it works form with ViewChild

@ViewChild('scroll') myScrollContainer:MatDrawerContainer; 
this.myScrollContainer.scrollable.getElementRef().nativeElement.scrollTop= 0;

Yeah, I'm able to scroll the container, but how to make the router automatically scroll it for me? (like it would with viewport)

@odahcam

  <router-outlet (activate)="onActivate($event)"></router-outlet>
onActivate(event){
    this.myScrollContainer.scrollable.getElementRef().nativeElement.scrollTop= 0;
}

or I misunderstood you?

Actually I'm using something like that, but I think the router should have some scrollable container configuration, beucase it tries to scroll by the viewport when you enable the scrollPositionRestoration: 'top' option and it won't work.

Your code does the job as mine does too, but both of us are unable to take profit from the native router functionality that does the scrolling job for us. To do that, we would need to tell the router to use our custom scrollable container instead of the viewport.

I noticed that the Router makes use of a guy called ViewportScroller and, as the docs says, you should inject that guy in your module or component if you wan't to customize the scroll behavior:

class AppModule {
 constructor(router: Router, viewportScroller: ViewportScroller, store: Store<AppState>) {
   router.events.pipe(filter(e => e instanceof Scroll), switchMap(e => {
     return store.pipe(first(), timeout(200), map(() => e));
   }).subscribe(e => {
     if (e.position) {
       viewportScroller.scrollToPosition(e.position);
     } else if (e.anchor) {
       viewportScroller.scrollToAnchor(e.anchor);
     } else {
       viewportScroller.scrollToPosition([0, 0]);
     }
   });
 }
}

That makes me think that the only way to integrate something like a fullscreen cdkContainer to the router scroll restoration would be implement my own ViewportScroller and alter the injection token that Angular uses for the router to inject my scroller instead of the default.

Unfortunately the docs for this matter is a little bit inexistent, so things are even more difficult.

Angular 6.1 and later:

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

@odahcam I've linked your comments to a related Angular Material issue: https://github.com/angular/material2/issues/4280. It would be great if you could provide a Stackblitz example and some additional information there.

@Splaktar all right, posted.

A mixture of Smaugs solution above and Guilherme Meireles on stackoverflow does the trick for me. Also unsubscribing in ngOnDestroy to avoid leakage.

import { Component } from '@angular/core'; 
import { Router, NavigationEnd } from '@angular/router'; 
import { Subscription } from 'rxjs/Rx';

@Component({
    moduleId: module.id, 
    selector: ‘my-app’,
    template: `<router-outlet></router-outlet>`
})

export class AppComponent {
    routerSubscription: Subscription;

    constructor(private router: Router) {}

    ngOnInit() {
        this.routerSubscription = this.router.events
            .filter(event => event instanceof NavigationEnd)
            .subscribe(event => {
                document.body.scrollTop = 0;
            });
    }

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

For those who cannot use filter(), map() etc operators on Observable add this:

import { filter, map } from 'rxjs/operators';

Angular 6.1 and later:

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

To others looking for a simple and clean solution for keeping the scroll position on back navigation and scroll to top on forward navigations, this is the solution. Will be default Angular behaviour in the future (described by the angular specifications: https://angular.io/api/router/ExtraOptions)

Angular 6.1 and later:
RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'})

To others looking for a simple and clean solution for keeping the scroll position on back navigation and scroll to top on forward navigations, this is the solution. Will be default Angular behaviour in the future (described by the angular specifications: https://angular.io/api/router/ExtraOptions)

I would like to add a half thumb up! 😅

If you have the following ExtraOptions:

// ...
const routerOptions: ExtraOptions = {
  useHash: false,
  anchorScrolling: 'enabled',
  scrollPositionRestoration: 'enabled'
};
// ...

in order to enable anchor links, it'll always go on top, even if the anchor is at the bottom of the page.

But if you're not using anchor navigation, it's an awesome fix! 😉

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings