Конфликт 2-х функций на JQuery, почему одна перебивает другую?
Вложений: 1
$(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 },800); }); }); }); Всем привет, друзья!!! В общем сделал две функции на JQuery. Суть первой функции: - Она отмечает активные пункты меню + По клику на пункт меню выполняется плавный скролл к соответствующему анкору сайта. Суть второй функции: - Она показывает скрытую ранее кнопку arrow (при прокрутке окна браузера на 500px), по клику на эту кнопку браузер плавно прокручивается на самый верх. А теперь суть вопроса: По отдельности все работает, но если нажать на кнопку вверх, то окно прокручивается нормально, но после этого не работает прокрутка с кнопок меню. Я так полагаю, что конфликт именно в той части когда к (html, body) применяется метод animate в обеих функциях, в результате вторая сбивает первую. Но почему так происходит, ведь функции подвешены на разных событиях и по идее не должны конфликтовать.. p.s. При вышеописанной проблеме нет абсолютно никаких ошибок в консоли. |
DirtyRomirez,
Цитата:
перенесите строки 19 и 29 в строку 15 |
Цитата:
p.s. Подскажите, пожалуйста клик вызывался столько раз из-за того что был внутри функции измеряющей скролл?? И получается количество кликов прямопропорционально количеству отсчетов скролла? Просто интересна причина этих многократных скроллов, чтобы больше не тупить. |
Цитата:
|
Часовой пояс GMT +3, время: 05:36. |