Chrome Anchor Link Not Working Fix

One of my single page sites that had been live for months with no changes suddenly had the menu stop functioning in Chrome only.  I can’t find an exact reason for the break, but I did find a cross-browser JavaScript solve that fixes the issue nicely. Just add the snippet to your site and the links should work automatically. Note that this fix requires jQuery but can be converted to VanillaJS.

Someone reached out to me today for help as the fix broke their WordPress site. If you’re using WordPress, this version uses the compatibility version of jQuery they provide out of the box. Be sure to place it in a javascript file and not your functions.php. Rui was kind enough to confirm the fix also works for Drupal 7.  


Comments
Harvey Specter
Posted at 6:29 pm October 26, 2017
Alexis Hawke
Reply
Author

Thank you so much for this fix – I had two sites with the same issue – only occurred on single-page sites where an anchor was used. Your fix sure was a life-saver! Thank you.

    Harvey Specter
    Posted at 6:34 pm October 26, 2017
    Greg
    Reply
    Author

    Glad it helped! I still can’t find the root cause of the issue which is frustrating me to no end.

Harvey Specter
Posted at 4:51 pm November 2, 2017
Cavallone
Reply
Author

Thank you! It worked for me even if i don’t understand what script does …:-)

Harvey Specter
Posted at 7:42 pm November 6, 2017
Andre Castro
Reply
Author

Thank you! It worked fine!

    Harvey Specter
    Posted at 2:23 pm November 7, 2017
    Greg
    Reply
    Author

    Glad it helped, Andre!

Harvey Specter
Posted at 4:21 pm December 6, 2017
Pete
Reply
Author

Hey it still doesn’t seem to work on my android chrome. Any ideas where the script should be placed?

    Harvey Specter
    Posted at 4:29 pm December 6, 2017
    Greg
    Reply
    Author

    Hi Pete,

    You can put it anywhere in your code after your reference to the jquery library. I just tested on Android Chrome and it’s working for me. If you can share a link, I’ll be happy to try and help you troubleshoot.

Harvey Specter
Posted at 4:06 am February 3, 2018
Stephen
Reply
Author

Excellent solution. Much appreciated.

Harvey Specter
Posted at 10:21 am February 11, 2018
James
Reply
Author

Thank you guy ! it roXx… you save my dev 🙂

    Harvey Specter
    Posted at 10:27 pm February 12, 2018
    Greg
    Reply
    Author

    Glad it helped, James!

Harvey Specter
Posted at 9:59 pm February 12, 2018
Jose Diego Diaz
Reply
Author

Hi. i use your script in my WordPress Site and fix the “Menu anchor links” but in the “#productos-y-servicios” the porfolio images dissapear. I remove your script and the images come back but the

anchor links fail. What coudl be? (I’m not so good with scripts). Thanks a lot

Harvey Specter
Posted at 6:07 pm February 23, 2018
Caio Carvalho
Reply
Author

Hey there!
The js code really fixed my menu problem, but another links still dont jumping to content.
I already tried so many forums, codes and change js properties but it just mess up w/ my website.
I use the OneEngine wordpress theme, and i have no support.
What could it be? If someone has a code just to paste it, i would be SOOO greatfull.

    Harvey Specter
    Posted at 7:19 pm February 23, 2018
    Greg
    Reply
    Author

    Hey Caio,

    I looked at your site, and if you’re referring to the “View more” link, there’s no anchor tag in the URL present on it so the script won’t do anything. If you’re not using javascript to jump to another point, you need to add an anchor tag to the link.

    Let me know if that helps.

      Harvey Specter
      Posted at 4:47 pm February 27, 2018
      Caio Carvalho
      Reply
      Author

      Actually there is a scroll to in portfolio section too, but in javascript it’s all set, with anchor links.
      In FF, IE and Opera works fine. Maybe i’m missing something…

Harvey Specter
Posted at 11:20 pm February 25, 2018
Kike Vesga
Reply
Author

Thanks man, saved the day!

    Harvey Specter
    Posted at 11:24 pm February 25, 2018
    Greg
    Reply
    Author

    Glad it helped!

Harvey Specter
Posted at 9:23 pm March 9, 2018
Filipe Apóstolo
Reply
Author

I tried to fix with your script but still doesn’t work. My Single page with ancors menu works fine in FF; IE and Opera and Safari;

I wrote the script inside the head and after calling jquery script. What is missing?

    Harvey Specter
    Posted at 9:33 pm March 9, 2018
    Greg
    Reply
    Author

    Hi Filipe,

    What’s the URL to your site?

Harvey Specter
Posted at 8:06 pm March 10, 2018
Vadim
Reply
Author

Hello,

I have a button on the first slide of my homepage that has an anchor that link to a form down the page. The button works on all the browsers except Chrome. I pasted your code into the “Custom JavaScript” section of the theme options but it still does not work. Please help.

Harvey Specter
Posted at 4:14 pm March 14, 2018
Robert
Reply
Author

I have tried to use this code on my word press website and it does not fix this issue. Pease help.

    Harvey Specter
    Posted at 12:57 pm March 19, 2018
    Greg
    Reply
    Author

    Robert, what’s your site URL? It’s hard to debug anything without any information. 🙂

Harvey Specter
Posted at 11:35 am March 19, 2018
simon
Reply
Author

hi thx for your help!
maybe its super stupid , but
where should I insert the code snippet?
is there a specific script in the editor of wordpress template or should i create a just new one?
sry if its stupid

best regards

    Harvey Specter
    Posted at 12:05 pm March 19, 2018
    simon
    Reply
    Author

    i paste it in the functions script and it works – awesome you saved my day too 🙂

      Harvey Specter
      Posted at 12:59 pm March 19, 2018
      Greg
      Reply
      Author

      Glad you were able to figure it out Simon!

        Harvey Specter
        Posted at 2:16 pm March 19, 2018
        simon
        Reply
        Author

        a short question – the scroll effect is working in chrome 🙂 but now the code is shown as text on top of the page – i tried to put the code snippet in but then the page is not workng an gives an error cannot modifiy header. Do you have maby another tip?
        thx best regards simon

          Harvey Specter
          Posted at 6:50 pm April 26, 2018
          Greg
          Author

          Simon, by functions script, did you mean functions.php? If so, you need to add it to a javascript file, not the functions.php as the code is javascript, not php.

Harvey Specter
Posted at 5:44 pm April 4, 2018
Peter
Reply
Author

THANKS! It’s been killing me for more than a year now, with clients complaining

    Harvey Specter
    Posted at 6:27 pm April 4, 2018
    Greg
    Reply
    Author

    Glad it helped, Peter!

Harvey Specter
Posted at 7:24 am April 9, 2018
Mark
Reply
Author

Working Super Fine …Thanks a ton ..!

    Harvey Specter
    Posted at 3:23 pm April 9, 2018
    Greg
    Reply
    Author

    Glad it helped, Mark!

Harvey Specter
Posted at 7:42 pm April 24, 2018
Rob
Reply
Author

When I paste it in the functions.php it breaks the site. Any ideas? url: http://www.stroomindepijp.nl

Harvey Specter
Posted at 2:12 pm April 27, 2018
David
Reply
Author

Great!! Thank you!!!

    Harvey Specter
    Posted at 2:16 pm April 27, 2018
    Greg
    Reply
    Author

    Glad it helped David!

Harvey Specter
Posted at 7:38 pm May 1, 2018
Lawrence
Reply
Author

Hey there, really love the solution but it isn’t working on my wordpress site! I even tried both code snippets. You can check my site here: llddesign.com

I appreciate any insight you can provide

    Harvey Specter
    Posted at 12:02 pm May 2, 2018
    Greg
    Reply
    Author

    Hi Lawrence, your site is showing maintenance mode so I can’t check it. Did you put the second snippet in a javascript file?

Harvey Specter
Posted at 9:04 am May 3, 2018
Rui Batista
Reply
Author

Hi and thanks so much for this fix. The WordPress solution also works perfectly in Drupal (version 7)
Been looking for a way to fix the end of tags function as anchors and thanks to you it is solved.

    Harvey Specter
    Posted at 12:37 pm May 3, 2018
    Greg
    Reply
    Author

    Glad it worked for you, Rui! Thank you for confirming that it works for Drupal 7 too. I’ll update the post in case anyone else with Drupal 7 runs into the issue. 🙂

Harvey Specter
Posted at 6:11 pm August 7, 2018
PMack
Reply
Author

Thanks Man! Fixed my problem

    Harvey Specter
    Posted at 11:24 pm August 12, 2018
    Greg
    Reply
    Author

    Glad it helped PMack!

Harvey Specter
Posted at 1:33 pm November 30, 2018
Kati
Reply
Author

Thank you sooo much for the code!!! Now the navigation works again perfectly…

    Harvey Specter
    Posted at 1:54 pm December 4, 2018
    Greg
    Reply
    Author

    Glad it helped Kati!

Harvey Specter
Posted at 9:57 am December 4, 2018
Anna
Reply
Author

OMG, thank you so very much for this fix! <3 <3 This was driving me crazy.

    Harvey Specter
    Posted at 1:54 pm December 4, 2018
    Greg
    Reply
    Author

    Glad it helped Anna!

Leave a Reply to Greg Cancel reply