Javascript 平滑滚动，特定类别除外，但图标不'；行不通

我有这个脚本可以平滑地滚动到链接的锚点，我不希望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图像按预期打开；除非我点击字体图标。在这种情况下，什么也不会发生

也许我应该编辑我的脚本，但是如何编辑呢？

---

任何建议都将不胜感激！提前感谢。

我已经使用一个新类解决了这个问题，并且只将它分配给我想要滚动到的元素

$(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);
    }
}); 

---

我已经使用一个新类解决了这个问题，并且只将它分配给我想要滚动到的元素

$(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);
    }
}); 

---

这是因为包装字体awesome图标的锚元素也有fancybox类。你必须依靠其他标准来区分fancybox图像开启器和字体超级图标链接。谢谢Terry，有什么建议吗？这是因为包装字体超级图标的锚元素也有fancybox类。你将不得不依靠其他标准来区分fancybox图像开场白和字体很棒的图标链接。谢谢Terry，有什么建议吗？