0

I have enabled the scrollPositionRestoration in my app-routing module as it follows:

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

But this creates conflicts when I try to make the user scroll to the page with routerLink, here's an example:

<li><a routerLink="/" fragment='servizi'>{{ "NAV_SERVIZI" | translate }}</a></li>

When the user clicks on the link, the url is compiled correctly: www.website.com/#servizi, while the user's redirect on the top of the page instead of at the middle, where the #servizi element is.

How can I enable the scrollPositionRestoration behavior only for page changes while preserving normal scrolling when I redirect the user within the same page?

Mr. Stash
  • 2,940
  • 3
  • 10
  • 24
Igor Cantele
  • 387
  • 1
  • 10

1 Answers1

1

You can set anchorScrolling: 'enabled'

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

https://angular.io/api/router/InMemoryScrollingOptions#anchorScrolling

Mr. Stash
  • 2,940
  • 3
  • 10
  • 24