0
$(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. При вышеописанной проблеме нет абсолютно никаких ошибок в консоли.

1
  • добавьте html код пожалуйста
    – Randall
    Commented 20 окт. 2018 в 18:29

1 ответ 1

0

В общем вся проблема кроется именно во второй функции, т.к. она работает по событию 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();
        }
    });


});
1
  • клик не срабатывает, а навешивается.
    – Grundy
    Commented 21 окт. 2018 в 6:59

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.