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?

Where is the lightbox trigger on your page? And at which point do you get this conflict? — Davide Perozzi, Aug 03 '16 at 17:18
Whenever I click on the four images in the "Characters" section, the lightbox just doesn't work anymore, once I've added the code for the Smoothscroll — Nicla Marino, Aug 05 '16 at 09:18

score 0 · Accepted Answer · answered Aug 05 '16 at 10:23

0

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.

answered Aug 05 '16 at 10:23

Davide Perozzi

386
2
13

It actually show a problem, here's the link: http://niclamarino.altervista.org/Layouts/Beeline/5.html#about Whenever you click on the Menu links you have like a 0.5 seconds screen of the section. This happens removing the "return false", do you have any idea of how can I solve this issue? – Nicla Marino Aug 07 '16 at 23:14
It's because without the return statement you fallback to the native behaviour of a href. This will use the anchor to jump to the section with the id defined in the href. So you could change the id of the section so it won't find any content to jump to or you take back the return statement and use a different tag and selector for the menu buttons. – Davide Perozzi Aug 08 '16 at 20:29
I've used the code `$('#menu a[href*="#"]:not([href="#"])').click(function() {` It works, but I still get the jumping! – Nicla Marino Aug 08 '16 at 23:29
I've finally fixed it adding "return false" to the script, and the #menu id. Now it shows no glitch and the lightbox works perfectly. Thank you for your help! – Nicla Marino Aug 09 '16 at 10:45

SmoothScoll and lightbox conflict

1 Answers1