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.

    /* Navigation Fix
    -----------------------------------------------------*/
    
     $(function() {
       $('a[href*="#"]:not([href="#"])').click(function() {
         if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
           var target = $(this.hash);
           target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
           if (target.length) {
             $('html, body').animate({
               scrollTop: target.offset().top
             }, 1000);
             return false;
           }
         }
       });
     });

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.  

  /* WordPress Navigation Fix
    -----------------------------------------------------*/
    
jQuery(function ($) {
       $('a[href*="#"]:not([href="#"])').click(function() {
         if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
           var target = $(this.hash);
           target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
           if (target.length) {
             $('html, body').animate({
               scrollTop: target.offset().top
             }, 1000);
             return false;
           }
         }
       });
     });
View Comments
  • 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.

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

    • THANK YOU!!! I was trying to figure this out and your solution worked like a charm! Very much appreciate you posting!

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

  • Thank you! It worked fine!

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

    • 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.

  • Excellent solution. Much appreciated.

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

  • 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

  • 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.

    • 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.

      • 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…

  • Thanks man, saved the day!

  • 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?

    • Hi Filipe,

      What’s the URL to your site?

  • 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.

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

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

  • 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

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

      • Glad you were able to figure it out Simon!

        • 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

          • 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.

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

  • Working Super Fine …Thanks a ton ..!

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

  • Great!! Thank you!!!

  • 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

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

  • 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.

    • 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. 🙂

  • Thanks Man! Fixed my problem

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

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

  • I was hoping this would work but so far no luck.
    Tried in a few places.

    The Theme was update but I didn’t create the site so I can’t download it.
    http://levilowreyofficial.com/

    • Did you figure it out already or do you still need help?

  • Dear Greg,

    I just want to tell a huge THANK YOU! for your script, which solved a similar issue I had with my website. I spent hours reading articles and replacing files without any success. I almost gave up on this and then I found your fix. Now everything works just great, both on desktop and mobile! Awesome work, thanks a lot!

    Have a great day,
    Milen

  • a million thanks, I had already thrown in the towel

  • My a href is not empty. So what should i use? It tag start a href=”somelink” tag close NIGHT It works on all browsers except Chrome.

  • In one of my website links suddenly stopped working but only on Chrome.

    I already have tried this solution. but this solution is for href containing # i guess. Mine href’s are not empty or contains #. Help me out please because client says he will create a dispute if it doesn’t work.

    • Hi Harjinder,

      The script is designed to fix anchor tags, which use the # in it. From my testing, regular links haven’t been affected by the issue and is probably being affected by something else.

      If you can post a URL or sample code, I can try to help.

  • Fixed, Thanks a lot! It was because of ontouchscreen.

  • Thank you! My problem was in Chrome and only with links to ID’s within the same page. Sometimes they would work, usually they would move a bit (maybe 40px) and then stick there. A second click on the link would get them to act as desired and move to the referenced div. Other browsers worked flawlessly. Strange, but this snippet has done the job. Thank you so much for your help. Hope you have a great day, you surely brightened mine!

Leave a Reply to simon
Cancel Reply