Linking to an anchor on another page, when it exists on the current page, keeps you on the current page instead of taking you to the correct URL

When linking to an anchor on another page, which also exists on the page you’re linking from, the page scrolls to the anchor on the page, rather than directing the user to the intended URL + anchor.

Here’s how to reproduce:

  1. Make two separate pages:

  2. Add the same ID somewhere inside of both pages to create an anchor:

  3. Add a link on one page to the other page’s anchor, and vice versa:

  4. When clicking the links on either page, they will scroll down to the ID on the same page rather than navigating to the intended page.

I will include the specific URL in a “Secure Note” where you can see this in action.

For anyone currently dealing with this bug and need a fix, here’s what I used. The prerequisite for this is to add a class, or some identifier, to the link itself. In this case: .linkFix

Then, just add this code to the Page’s JS (or Template’s JS, or Global JS, or wherever it fits for your situation):

jQuery(".linkFix").on("click", function(e) {
    // Prevent the default behavior of the link and stop the event propagation
    e.preventDefault();
    e.stopPropagation();

    // Use this to open the URL in a new tab:
    window.open("https://domain.com/#permalink", "_blank");

    // Use this to open in the same tab:
    window.location.assign("https://www.apriori.com/manufacturing-insights-conference/#agenda");
});

NOTE: This “fix” is very hacky and certainly not ideal! Looking forward to this bug being fixed. Thanks!

1 Like

Hey Scott,

Thanks for reaching out!

I was able to replicate the issue on my development website. I will add this issue in our bug tracker so that our developers will fix this issue. We really appreciate your time and effort in explaining everything.

Once again thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.