Question

I have smooth-scroll jQuery code that is completing with my bootstrap carousel jQuery code for the targeted #id.

This is the smooth scroll code:

$('[href^=#]').click(function (e) {
  e.preventDefault();
  var div = $(this).attr('href');
  $("html, body").animate({
    scrollTop: $(div).position().top
  }, "slow");
});

This code unfortunately competes with my bootstrap carousel jQuery code over the #myCarousel id. So whenever I click on the carousel left/right buttons the smooth-scroll jQuery will take effect and smooth-scroll my webpage, which I do not want.

This is the html for the carousel part:

<div id="myCarousel">

  <a href="#myCarousel" data-slide="prev">
    <img src="img/left.png"></a>
  <a href="#myCarousel" data-slide="next">
    <img src="img/right.png"></a>

How can I isolate the effects of the smooth-scroll from the carousel?

Answer 1

Can use not()

$('[href^=#]').not('#myCarousel a').click....