javascript - 平滑滚动(特定类别除外)，但 fontawesome 图标不起作用

Question

我有这个脚本可以平滑滚动到链接的 anchor ，我不希望带有 fancybox 的图像链接受到影响:

/*======================================
    =         SCROLL TO ANCHOR           =
======================================*/
$(document).on('click', 'a', function(event){
    if (!$(event.target).hasClass('fancybox')) {
        event.preventDefault();

        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top
        }, 500);
    }
});

这是图像链接的 HTML 结构:

<div class="grid-item grid-item--big">
    <div class="gallery-image">
        <a href="assets/images/tour-view/grid-images/fancybox-1.png" data-fancybox-group="gallery" class="title-hover dh-overlay fancybox"><i class="icons fa fa-eye"></i></a>
        <div class="bg"></div>
    </div>
</div>

该脚本可以在页面上的任何位置以及图像上工作，当我单击它时，脚本就会完成工作，并且不会触发滚动并且会按预期打开 fancybox 图像；除非我点击字体很棒的图标。在这种情况下什么也不会发生。

也许我应该编辑我的脚本，但是如何编辑呢？ 任何建议将不胜感激!提前致谢。

Answer 1

我已经解决了使用一个新类并将其仅分配给我想要滚动到的元素。

$(document).on('click', 'a', function(event){
    if ($(event.target).hasClass('btn-book-tour') || $(event.target).hasClass('scrollto')) {
        event.preventDefault();

        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top
        }, 500);
    }
});