jQuery滚动动画不适用于图标

Question

我成功地实现了一个 jQuery 动画来调整我的导航链接的固定标题的偏移量。但是，我添加了一个 Font Awesome 图标，该图标链接到与导航链接之一相同的部分（ID 为 #about）。当我单击该图标时，什么也没有发生，但单击导航链接会应用 jQuery 偏移量。

这是 jQuery：

let sectionId;

$('.nav-link, .chevron').click((e) => {
  sectionId = $(e.target).attr('href');
  $('html, body').animate({
    scrollTop: $(sectionId).offset().top - 20
  }, 100);
});

HTML -- jQuery 与此一起使用：

<a class="nav-link px-4" href="#about">ABOUT</a>

但不是为了这个（页面下方）：

<a class="chevron" href="#about">
  <i class="fas fa-chevron-down fa-3x text-white"></i>
</a>

我怀疑这与在 nav-link 和 chevron 类中引用具有相同 ID #about 的 href 有关。如果是这样，有没有办法解决它？

Answer 1

使用$(e.currentTarget)

e.target 是触发事件调度程序触发的对象，e.currentTarget 是您分配侦听器的对象。

let sectionId;
$('.nav-link, .chevron').click((e) => {
  e.preventDefault();
  sectionId = $(e.currentTarget).attr('href');
  $('html, body').animate({
    scrollTop: $(sectionId).offset().top - 20
  }, 100);
});