Конфликт 2-х функций на JQuery, почему одна перебивает другую?

238

28 февраля 2019, 17:40

$(function() {
$('.menu__item a').on('click', function(e) {
    e.preventDefault();
    $('.menu__item a').removeClass('active').filter(this).addClass('active');
    var selector = $(this).attr('href');
    var goTo = $(selector);
    $('html, body').animate({
        scrollTop: goTo.offset().top
    },500);
});
$(window).on('scroll', function(){
    var $arrow = $('.arrow');
    var scrolled = $(this).scrollTop();
    if (scrolled >= 500) {
        $arrow.fadeIn();
    } else if (scrolled < 500) {
        $arrow.fadeOut();
    }
    $arrow.on('click', function(e){
        e.preventDefault();
        $('html, body').animate({
            scrollTop: 0
        },500);
    });
});

});

Доброго времени суток вам, камрады!!! В общем сделал две функции на JQuery.

Суть первой функции: - Она отмечает активные пункты меню + По клику на пункт меню выполняется плавный скролл к соответствующему анкору сайта.

Суть второй функции: - Она показывает скрытую ранее кнопку arrow (при прокрутке окна браузера на 500px), по клику на эту кнопку браузер плавно прокручивается на самый верх.

А теперь суть вопроса: По отдельности все работает, но если нажать на кнопку вверх, то окно прокручивается нормально, но после этого не работает прокрутка с кнопок меню. Я так полагаю, что конфликт именно в той части когда к (html, body) применяется метод animate в обеих функциях, в результате вторая сбивает первую. Но почему так происходит, ведь функции подвешены на разных событиях и по идее не должны конфликтовать..

p.s. При вышеописанной проблеме нет абсолютно никаких ошибок в консоли.

Answer 1

В общем вся проблема кроется именно во второй функции, т.к. она работает по событию scroll, и внутри неё лежит функция подвешенная на событие click. Исходя из этого получается, что "клик срабатывает" сотни раз при скролировании, соответственно клик-событие пришлось вынести за функцию работающую от скроллинга.

$(function() {
    $('.menu__item a').on('click', function(e) {
        e.preventDefault();
        $('.menu__item a').removeClass('active').filter(this).addClass('active');
        var selector = $(this).attr('href');
        var goTo = $(selector);
        $('html, body').animate({
            scrollTop: goTo.offset().top
        },500);
    });
    var $arrow = $('.arrow');
    $arrow.on('click', function(e){
            e.preventDefault();
            $('html, body').animate({
                scrollTop: 0
            },500);
        });
    $(window).on('scroll', function(){
        var scrolled = $(this).scrollTop();
        if (scrolled >= 500) {
            $arrow.fadeIn();
        } else if (scrolled < 500) {
            $arrow.fadeOut();
        }
    });

});