I am facing a weird problem. I am trying to implement scroll to top functionality on route change in Angular and I have tried various methods. For all the methods the scroll to top functionality works perfectly fine when testing on my laptop but they act weirdly when opened on mobile/iPad.

For some links it does scroll to the top as expected but for some other links it just loads the component without scrolling to the top. What's weird is that it happens only on my mobile/iPad. On laptop it works completely fine.

I had implemented the following solutions for this scroll to top functionality:

Method 1:
I implemented a scrollToTop() function which I was calling on click event on the anchor tags with the routerLink.

scrollToTop() {
   window.scroll(0,0);
}

And my links looked like this:

<li class="nav-item" routerLinkActive="active">
  <a class="nav-link" routerLink="about" (click)="scrollToTop()">About Us</a>
</li>

Method 2:
I added the scrollPositionRestoration: 'enabled' option in the app routing module.

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

Both the above methods are working on laptop but not on mobile devices. In case it's of any importance, I am using lazy-loading in my application and AOT during building the application. Am I missing something?