bug: routing integrations don't support hash links

[maxtacco]

Ionic version:

[x] 4.x

Current behavior: Angular has options to enable anchor handling using the following router config:

RouterModule.forRoot(routes, {
      anchorScrolling: 'enabled',
      onSameUrlNavigation: 'reload', // required to handle clicking same anchor twice
      scrollPositionRestoration: 'enabled'
    })

These options do not work when Ionic is used.

Expected behavior: The options should be supported or alternate solution provided.

Steps to reproduce:

1. Create a page with anchors using routerLink with fragment directive to different sections.
2. Try clicking on anchors.

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.4 (/Users/[user]/.nvm/versions/node/v10.15.3/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.9.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.5.1, (and 14 other plugins)

Utility:

   cordova-res : 0.6.0
   native-run  : 0.2.8

[averyjohnston]

Thanks for the issue! It looks like this is still an issue in Ionic 6. I spun up an Angular test app with the following HTML inside an ion-content:

<p id="testPara">test</p>
<p>test</p>
<p>test</p>
<!-- more paras here -->
<ion-button [routerLink]="['/home']" fragment="testPara">Anchor Link</ion-button>

Clicking the button correctly changed my URL to /home#testPara, but the content didn't scroll. The behavior was the same whether I had the router config set up as described or not. I was also able to replicate this behavior in React and Vue using routerLink="#testPara".

We'll likely need to update the routing integrations for each framework to detect a hash in the URL and call a scroll method on ion-content as needed.

In the meantime, a possible workaround would be to use the scrollToPoint method on ion-content to manually scroll to the element with the chosen ID.

[joelmeaders]

Just ran into this. Anyone find any good fixes?