X
Tap here to go to the mobile version of the site.
Scheduled maintenance: Thursday, April 2, between 3pm and 5pm UTC. This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn’t solve your issue and you want to ask a question, we have our support community waiting to help you at @firefox on Twitter

Support Forum

External Page Jumps does not work properly in Firefox, how to fix this?

Posted

I have a site created through wordpress platform. I have used page jump (anchor) to redirect one of my links into a specific section from another page. Works fine with Chrome, IE and Microsoft Edge, except with Firefox. It redirects to the page but gone through the bottom of it rather than the specific section where it's suppose to land.

I have a site created through wordpress platform. I have used page jump (anchor) to redirect one of my links into a specific section from another page. Works fine with Chrome, IE and Microsoft Edge, except with Firefox. It redirects to the page but gone through the bottom of it rather than the specific section where it's suppose to land.

Chosen solution

Hmm, Firefox is computing the vertical position of that box before applying the CSS rules that move the box into the sidebar and way up the page. (Example screenshot attached.)

I think this is due to a recent change in Firefox that changed the sequence of certain actions with odd side effects like this. Possibly related issue (the window.print() script command running before styles are applied, starting in Firefox 67): https://support.mozilla.org/questions/1262244

As a workaround, you could re-navigate to the hash using something like this:

/* Scroll to anchor */
function pgshow(e){
    var elId = window.location.hash;
    if (elId.length > 1){
        el = document.getElementById(elId.substr(1));
        if (el) el.scrollIntoView(true);
    }
}
// pageshow fires after load and on Back/Forward
window.addEventListener('pageshow', pgshow);

If you only want to navigate on the initial page load (i.e., not if the user is going Back/Forward to the page in the same tab), it would make more sense to hook into the load event:

Read this answer in context 1

Additional System Details

Application

  • User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0

More Information

Wesley Branton
  • Top 25 Contributor
715 solutions 5631 answers

Do you have a link to the website that we can try for ourselves?

Do you have a link to the website that we can try for ourselves?
cor-el
  • Top 10 Contributor
  • Moderator
17857 solutions 161586 answers

Is this a link (anchor) to a position in an (i)frame or directly on the web page?

Is this a link (anchor) to a position in an (i)frame or directly on the web page?

Question owner

Here's the page that you can access: https://wem.technology/dark-web-why-should-business-consider-dark-web-scanning/

On the right sidebar, next to recent posts, there is a CTA. The button that says Free Audit will link to this page: https://wem.technology/it-support-london/#free-network-sec-audit-form. The element's ID where it should point is #free-network-sec-audit-form as shown in the URL. It is situated in the right sidebar, a yellow-like-coupon form that says FREE NETWORK SECURITY AUDIT.

Here's the page that you can access: https://wem.technology/dark-web-why-should-business-consider-dark-web-scanning/ On the right sidebar, next to recent posts, there is a CTA. The button that says '''Free Audit''' will link to this page: ''https://wem.technology/it-support-london/#free-network-sec-audit-form''. The element's ID where it should point is '''#free-network-sec-audit-form''' as shown in the URL. It is situated in the right sidebar, a yellow-like-coupon form that says '''FREE NETWORK SECURITY AUDIT'''.
jscher2000
  • Top 10 Contributor
8953 solutions 73374 answers

Chosen Solution

Hmm, Firefox is computing the vertical position of that box before applying the CSS rules that move the box into the sidebar and way up the page. (Example screenshot attached.)

I think this is due to a recent change in Firefox that changed the sequence of certain actions with odd side effects like this. Possibly related issue (the window.print() script command running before styles are applied, starting in Firefox 67): https://support.mozilla.org/questions/1262244

As a workaround, you could re-navigate to the hash using something like this:

/* Scroll to anchor */
function pgshow(e){
    var elId = window.location.hash;
    if (elId.length > 1){
        el = document.getElementById(elId.substr(1));
        if (el) el.scrollIntoView(true);
    }
}
// pageshow fires after load and on Back/Forward
window.addEventListener('pageshow', pgshow);

If you only want to navigate on the initial page load (i.e., not if the user is going Back/Forward to the page in the same tab), it would make more sense to hook into the load event:

Hmm, Firefox is computing the vertical position of that box before applying the CSS rules that move the box into the sidebar and way up the page. (Example screenshot attached.) I think this is due to a recent change in Firefox that changed the sequence of certain actions with odd side effects like this. Possibly related issue (the window.print() script command running before styles are applied, starting in Firefox 67): https://support.mozilla.org/questions/1262244 As a workaround, you could re-navigate to the hash using something like this: <pre>/* Scroll to anchor */ function pgshow(e){ var elId = window.location.hash; if (elId.length > 1){ el = document.getElementById(elId.substr(1)); if (el) el.scrollIntoView(true); } } // pageshow fires after load and on Back/Forward window.addEventListener('pageshow', pgshow); </pre> If you only want to navigate on the initial page load (i.e., not if the user is going Back/Forward to the page in the same tab), it would make more sense to hook into the load event: * https://developer.mozilla.org/docs/Web/API/Window/pageshow_event * https://developer.mozilla.org/docs/Web/API/Window/load_event

Question owner

The image you have sent points to the wrong coupon that I have meant. You probably have thought the one below the article. What I meant is the one in the right sidebar. Sorry if I didn't make it clear. But anyway, with what you've explained seems that it is, for the meantime, impossible for the step that I did. The code you've posted, will this be inserted in the footer area? And where do I put the element ID/anchor in that part? Sorry, I'm a bit confused.

The image you have sent points to the wrong coupon that I have meant. You probably have thought the one below the article. What I meant is the one in the right sidebar. Sorry if I didn't make it clear. But anyway, with what you've explained seems that it is, for the meantime, impossible for the step that I did. The code you've posted, will this be inserted in the footer area? And where do I put the element ID/anchor in that part? Sorry, I'm a bit confused.
jscher2000
  • Top 10 Contributor
8953 solutions 73374 answers

jcignoro said

The image you have sent points to the wrong coupon that I have meant. You probably have thought the one below the article. What I meant is the one in the right sidebar.

That is the correct coupon, and that is what it looks like in the split second after Firefox scrolls down to it before it gets moved to the right sidebar. You may need to bypass the cache to see it: Ctrl+Shift+r

But anyway, with what you've explained seems that it is, for the meantime, impossible for the step that I did. The code you've posted, will this be inserted in the footer area? And where do I put the element ID/anchor in that part?

The script would go into WordPress somewhere* so that when the user loads a page with an anchor, the browser scrolls to the anchor if it's not there already. The script just works with whatever hash it finds on the URL, you don't need to change anything else.

* Each WordPress theme is different, so I don't know how you would integrate custom JavaScript into yours.

Maybe I can post it as a WordPress plugin at some point? That would be a new adventure...

''jcignoro [[#answer-1248907|said]]'' <blockquote> The image you have sent points to the wrong coupon that I have meant. You probably have thought the one below the article. What I meant is the one in the right sidebar. </blockquote> That is the correct coupon, and that is what it looks like in the split second after Firefox scrolls down to it before it gets moved to the right sidebar. You may need to bypass the cache to see it: Ctrl+Shift+r <blockquote> But anyway, with what you've explained seems that it is, for the meantime, impossible for the step that I did. The code you've posted, will this be inserted in the footer area? And where do I put the element ID/anchor in that part? </blockquote> The script would go into WordPress somewhere* so that when the user loads a page with an anchor, the browser scrolls to the anchor if it's not there already. The script just works with whatever hash it finds on the URL, you don't need to change anything else. ''* Each WordPress theme is different, so I don't know how you would integrate custom JavaScript into yours.'' Maybe I can post it as a WordPress plugin at some point? That would be a new adventure...

Question owner

I just inserted it in the footer of the theme that I have used. That just works like magic! A big thank for the help @jscher2000! It answered my question perfectly.

jscher2000 said

As a workaround, you could re-navigate to the hash using something like this:
/* Scroll to anchor */
function pgshow(e){
    var elId = window.location.hash;
    if (elId.length > 1){
        el = document.getElementById(elId.substr(1));
        if (el) el.scrollIntoView(true);
    }
}
// pageshow fires after load and on Back/Forward
window.addEventListener('pageshow', pgshow);
I just inserted it in the footer of the theme that I have used. That just works like magic! A big thank for the help @jscher2000! It answered my question perfectly. ''jscher2000 [[#answer-1248902|said]]'' <blockquote> As a workaround, you could re-navigate to the hash using something like this: <pre>/* Scroll to anchor */ function pgshow(e){ var elId = window.location.hash; if (elId.length > 1){ el = document.getElementById(elId.substr(1)); if (el) el.scrollIntoView(true); } } // pageshow fires after load and on Back/Forward window.addEventListener('pageshow', pgshow); </pre> </blockquote>
r.puma 0 solutions 1 answers

I have the same issue on a jimdo website an i hope you can help me out with this. I've set the anchor like this on https://www.angelikawalthert.ch/galerie/hotel-titlis-palace-engelberg/ :

<a href="https://www.angelikawalthert.ch/#hoteltitlispalaceengelberg" target="_self" title="hoteltitlispalaceengelberg">Projekte</a>

and the target on https://www.angelikawalthert.ch/ like this :

The strange thing is that sometimes it works and sometimes not. But it works properly on Chrome and Safari.

Thanks a lot!

I have the same issue on a jimdo website an i hope you can help me out with this. I've set the anchor like this on https://www.angelikawalthert.ch/galerie/hotel-titlis-palace-engelberg/ : <p><a href="https://www.angelikawalthert.ch/#hoteltitlispalaceengelberg" target="_self" title="hoteltitlispalaceengelberg">Projekte</a></p> and the target on https://www.angelikawalthert.ch/ like this : <div id="hoteltitlispalaceengelberg"> </div> The strange thing is that sometimes it works and sometimes not. But it works properly on Chrome and Safari. Thanks a lot!
jscher2000
  • Top 10 Contributor
8953 solutions 73374 answers

Hi r.puma, you might need to use the same workaround.

Hi r.puma, you might need to use the same workaround.
michael_dragomir 0 solutions 1 answers

having issue with anchor tags on same page. When I initially click on the link, it takes me to top of page. then when I click in same link it takes me to the correct section. This only occurs in firefox. I"m navigating from the same page and trying to jump to different section of same page.

having issue with anchor tags on same page. When I initially click on the link, it takes me to top of page. then when I click in same link it takes me to the correct section. This only occurs in firefox. I"m navigating from the same page and trying to jump to different section of same page.
kaiK 0 solutions 2 answers

Had this Problem on a WP-Website, finally found a solution via plugin to fix it.

Had this Problem on a WP-Website, finally found a solution via plugin to fix it.

Modified by kaiK

jscher2000
  • Top 10 Contributor
8953 solutions 73374 answers

Helpful Reply

Hi kaiK, what do you mean by

the jump to section is ok, but all the content is gone.

Do you want to share a link to a page demonstrating the problem?

Hi kaiK, what do you mean by <blockquote>the jump to section is ok, but '''all the content is gone'''.</blockquote> Do you want to share a link to a page demonstrating the problem?
kaiK 0 solutions 2 answers

Hi jscher2000! In my case the problem is fixed. Was a litte pissed off this morning, nevermind.

Thank you for your reply!

Hi jscher2000! In my case the problem is fixed. Was a litte pissed off this morning, nevermind. Thank you for your reply!