jQuery, throw new Error("Syntax error, unrecognized expression: " + a

Question

I have a fixed navigation where the nav items are clicked and smoothscroll to sections on the page and add an active class to the menu item.

It was working perfectly when developing locally on localhost but now that I've moved the site live it gives the error:

Uncaught Error: Syntax error, unrecognized expression: /#about-section

and

throw new Error("Syntax error, unrecognized expression: " + a)

The site is at website to test
The code that made it work on localhost is:

jQuery(document).ready(function($) {

  var sections = $('section'),

    nav = $('nav'),

    nav_height = nav.outerHeight();



  $(window).on('scroll', function() {

    var cur_pos = $(this).scrollTop();

    

    sections.each(function() {

      var top = $(this).offset().top - nav_height,

        bottom = top + $(this).outerHeight();



      if (cur_pos >= top && cur_pos <= bottom) {

        nav.find('a').removeClass('active');

        sections.removeClass('active');



        $(this).addClass('active');

        nav.find('a[href="#' + $(this).attr('id') + '"]').addClass('active');

      }

    });

  });



  nav.find('a').on('click', function() {

    var $el = $(this),

      id = $el.attr('href');



    $('html, body').animate({

      scrollTop: $(id).offset().top - nav_height

    }, 500);



    return false;

  });

});

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

  <ul id="menu-not-landing-main-menu" class="nav navbar-nav navbar-right">

    <li id="menu-item-442" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-442 active active">

      <a href="/#about-section">About</a>

    </li>

    <li id="menu-item-443" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-443 active active">

      <a href="/#speakers-section">Speakers</a>

    </li>

    <li id="menu-item-444" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-444 active active">

      <a href="/#mini-zeminars-section">Mini Zeminars</a>

    </li>

  </ul>

</div>

Can anyone help please?

Answer 1

Remove slash / from the all anchor tag href, like

    <li id="menu-item-442" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-442 active active">
      <a href="#about-section">About</a>
    </li>
    <li id="menu-item-443" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-443 active active">
      <a href="#speakers-section">Speakers</a>
    </li>
    <li id="menu-item-444" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-444 active active">
      <a href="#mini-zeminars-section">Mini Zeminars</a>
    </li>

You will be good to go then ;)

jQuery, throw new Error("Syntax error, unrecognized expression: " + a

Sign up