Smooth Scrolling Anchors Affecting Bootstrap Carousel Arrows

I've always used this script (found in CSS Tricks I think) to make smooth scrolling anchor links: $(function() { $('a[href*='#']:not([href='#'])').click(function() { if (location

Solution 1:

just change .not() argument like $('a[href*="#"]:not(.carousel-control)')

Here is the full example of your code

$(function() {
  $('a[href*="#"]:not(.carousel-control)').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);
        returnfalse;
      }
    }
  });
});

Play here if you want https://jsfiddle.net/eqaxxq5n/1/

But using like this a[href*="#"] might cause any issue again so it's better use any class or indicator to initialize your smooth effect like a.smoothClass[href*="#"] or something else.

Hope it make sense to you.