Smooth scroll except on specific class but fontawesome icon doesn't work

Question

I have this script to smooth scroll to the anchor of a link where I don't want that links of images with fancybox are affected:

/*======================================
    =         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);
    }
});

This is the HTML structure of the image link:

<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>

The script works everywhere on the page, and also over the image, when I click it the script does it job and no scroll is fired and fancybox image is opened as expected; except when I click on the font-awesome icon. In that case nothing happens.

Maybe I should edit my script, but how? Any suggestion would be really appreciated! Thanks in advance.

Answer 1

I've solved using a new class and assigned it only to elements that I want to scroll to.

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