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:
-
Make two separate pages:
-
Add the same ID somewhere inside of both pages to create an anchor:
-
Add a link on one page to the other page’s anchor, and vice versa:
- So, on domain.com/permalink1/ link to domain.com/permalink2/#anchor
- And, on domain.com/permalink2/ link to domain.com/permalink1/#anchor
-
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!