bug: routing integrations don't support hash links

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:

Create a page with anchors using routerLink with fragment directive to different sections.
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 (cordova-lib@9.0.1)
   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

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.

Just ran into this. Anyone find any good fixes?

fix(router): support anchor fragments in href (ionic-team#31172)

Hey! The fix for this has been released as part of v8.8.9. Thanks for the report!

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

fix(router): support anchor fragments in href (ionic-team#31172)

Navigation Menu

Repository navigation

bug: routing integrations don't support hash links #19365

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

bug: routing integrations don't support hash links #19365

Description

Activity

averyrousseau commented on Feb 7, 2022

joelmeaders commented on Dec 13, 2023

ShaneK commented on Jun 3, 2026

ionitron-bot commented on Jul 3, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions