Jump (anchor) links not working correctly in some browsers

  • I’ve added a simple jump (anchor) link from near the top of a page to further down the page.

    It works fine in IE (v11) but takes 2 clicks before it works in Chrome (v52) & FireFox (v48). The first click on the link in Chrome/FF seems to jump to the top of the page. The second click takes you to the correct section.

    Any ideas why this might be?

    I’ve published one page so you can see it in action: https://inspire.airnewzealand.co.nz/destination/vancouver/vancouver-winter-wonderland

    Code I’m using is:

    For the link: <a href="#video">Watch our video below</a>.
    For the anchor: <a id="video"></a>

Viewing 9 replies - 1 through 9 (of 9 total)

  • Try using a different fragment identifier. “video” is a HTML tag name. Change it to “watch-video” instead.

    Thread Starter nzsq

    (@nzsq)

    The same thing happens no matter what I call the anchor. I’ve updated it to “watch-video” now and still the same problem.

    https://inspire.airnewzealand.co.nz/destination/vancouver/vancouver-winter-wonderland#watch-video

    Your anchor tag is empty. Wrap it around some content like the Watch heading.

    Thread Starter nzsq

    (@nzsq)

    Same thing happens ??

    <a href="#watch-video">Watch our video below</a>.
    <h4 id="watch-video">Watch</h4>

    https://inspire.airnewzealand.co.nz/destination/vancouver/vancouver-winter-wonderland

    any solution to this found yet?

    I’m having the same issue. I’m a web developer of 12 years, this is basic coding and should be working fine.

    Same issue here! Also have been designing and updating sites professionally for years; there seems to be an issue on WordPress’s end here…

    +1 it is happening to me as well. In my case, the #link occurs in the footer of my site, and looks like

    <a href='https://strenga.com/about-strenga/#faq'>FAQ</a>

    and the reference goes to

    <h4 id='faq'>Frequently Asked Questions</h4> on the page

    When you click on the link in Chrome it takes you to the top of the page, not the FAQ section, url in the browser bar has the #faq removed. This has to be some sort of rewrite issue, but I don’t understand how it could only affect one browser!

    Wait <palm slap to head> this can’t reasonably be a server / WP issue, because accessing the #anchor part of the url *has to be implemented by the browser*. The server returns the whole page regardless of the anchor after all…

    I’ve looked at the page returned by the server and the anchor is there … time to start looking more at the browser.

    OK, I found my problem: javascript code that was rewriting the url to remove queries, also removed fragment identifiers. It was in my own code, so now general learning/fix here, other than to look closely at your javascript.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Jump (anchor) links not working correctly in some browsers’ is closed to new replies.