2

I would like to use fragment routing to a page in my navigation. Actually it works fine if the page is fully loaded. Unfortunatelly it does not scroll to the correct position if the page is not yet fully loaded.

This is the code I have adjusted in the app-routing.module.ts:

  imports: [RouterModule.forRoot(routes,
    {
      // configure Router module to handle anchor scrolling with fragment
      anchorScrolling: 'enabled',
      onSameUrlNavigation: 'reload',
      scrollPositionRestoration: 'enabled',
      scrollOffset: [0, 80],
    })],
  exports: [RouterModule]

This is the anchor-tag in my navigation:

<a class="dropdown-item" routerLink="leistungen" fragment='DigitalFramework'>Digitale Methoden | Digitalisierung</a>

And finally the section I would like to scroll:

<section id="DigitalFramework"></section>

This code works fine when I have loaded the page already, if this is not the case I do not scroll to the position I would like to come.

The question is how do I initiate the anchor scrolling only if the page is fully loaded?

To Am
  • 31
  • 6
  • Hi, welcome to stack overflow. Have you tried putting the code to scroll in either an ngAfterViewInit: https://angular.io/api/core/AfterViewInit or just a settimeout without ms (or 0 as the ms, they are the same)? This should allow the scrolling to happen after the page is fully loaded – jgerstle Jan 26 '20 at 10:02
  • Thanks for the hint, have you seen an example which helps me to fully understand how to implement it in my application? Thanks in Advance, Tony – To Am Jan 26 '20 at 11:13
  • Not sure I understand. You are saying "Actually it works fine if the page is fully loaded" then you ask "The question is how do I initiate the anchor scrolling only if the page is fully loaded?" could you please elaborate? – Yaniv Amrami Jan 26 '20 at 17:34
  • The problem occurs on the home-page from which I would navigate to a section where some images are built, which means on the first click it does not go to the section, it is somewhere inbetween. Whereas, when I have loaded the specific page it is all fine. I suppose in using the method which jgerstle writes (ngAfterViewInit) would help me to solve the problem. This would let scroll to the fragment once the page is fully loaded and not in a state before. Nonetheless, as I am not that experienced I am looking for an good example to learn from. – To Am Jan 26 '20 at 17:42
  • Is it possible for you to create a stackblitz or something similar so that I can try to fix the issue that way. If you just want an example of using ngAfterViewInit I'm sure there are plenty on the web, including the one I linked above. You can also look at this for an example of something similar: https://stackoverflow.com/questions/56762877/lazy-loading-and-scrollintoview-angular2version-7 – jgerstle Jan 27 '20 at 14:22
  • 1
    This page: https://angular-7fpprl.stackblitz.io/qwe#qwe shows exactly the behaviour I would like to solve on my page. There are 5 links and the last one works only on the second click. More details are described here: https://github.com/angular/angular/issues/30139 – To Am Jan 27 '20 at 17:39

0 Answers0