jQuery плавная прокрутка к якору, влияющая на Bootstrap 4 карусель

Question

Я создаю веб-сайт с ссылками на каждую страницу, которые плавно переходят к следующему разделу при нажатии с помощью jQuery. Наряду с этим я использую карусель Bootstrap 4 в качестве главного героя на большинстве страниц.

Карусель работала отлично, пока я не создал функцию плавной прокрутки; и теперь, поскольку карусель использует якорные ссылки, чтобы заставить две навигационные стрелки работать, они больше не работают, как предполагалось. (Они прокручивают страницу вниз к вершине изображения героя, а не поворачивают изображения карусели.)

Мой вопрос, как мне изменить мою маленькую функцию jQuery (или что-то еще полностью), чтобы сделать мой ID карусели освобожден от этого.

// Smooth scroll when anchor link
$('a').click(function(){
  $('html, body').animate({
      scrollTop: $( $.attr(this, 'href') ).offset().top
  }, 500);
  return false;
});

  
  <div class="slide-controls-container">
    <div class="slide-controls">
      <a class="carousel-control-prev" href="#hero-carousel" role="button" data-slide="prev" style="z-index:5;">
        <img src="https://i.ibb.co/mq7hVd5/prev.png" alt="next" />
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#hero-carousel" role="button" data-slide="next" style="z-index:5;">
        <img src="https://i.ibb.co/w04vMXH/next.png" alt="next" />
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>

Я попытался указать, не включать ли класс карусели следующим образом:

$('a:not(.hero-carousel a[href=#])').click

Но это делает всю плавную прокрутку неработающей .

Answer 1

Я пытался сделать это намного сложнее, чем должно было быть, мне просто нужно было добавить класс к ссылкам привязки, который я хотел сгладить прокруткой, а затем указать этот класс в моей функции jQuery.

// Smooth scroll when anchor link
$('a.chevron-link').click(function(){
  $('html, body').animate({
      scrollTop: $( $.attr(this, 'href') ).offset().top
  }, 500);
  return false;
});

<div class="chevron">
  <a class="chevron-link" href="#next-section"><i class="fas fa-chevron-down"></i></a>
</div>

Извинения, и спасибо за помощь