Question

我有这个脚本可以平滑滚动到链接的锚点，我不希望图像链接与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图像;除非我点击font-awesome图标。在那种情况下没有任何事情发生。

也许我应该编辑我的脚本，但是怎么样？任何建议将非常感谢！提前谢谢。

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

平滑滚动除了特定类，但fontawesome图标不起作用

1 个答案: