SmoothScoll and lightbox conflict

Question

I've this website, and there's a conflict between Smoothscroll javascript and lightbox one.

Here's the script for the Scroll

$(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;
        }
      }
    });
  });

How can I solve it? How can I make the lightbox and the smooth scrolling work simultaneously?

Answer 1

I'm not an jQuery expert and don't know how flexible the selectors are, but here are some suggestions:

Suggestion 1:

I don't think this selector:

a[href*="#"]:not([href="#"])

will work properly. You're selecting all href elements if they dont't have the attribute value "#". I think this case doesn't cover the links with a different value like you have: "#queen-bee". I consider you to use a different selector.

Suggestion 2:

if (target.length) {
   $('html, body').animate({
      scrollTop: target.offset().top
   }, 1000);

   return false; // Try removing the return
}

The return statement could prevent the event from bubbling, so the lightbox won't receive it. Try to remove it.