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

Question

[Kee_real]

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

Answer 1

[konstantindeveloper]

У вас ошибка во второй функции. При каждом скроле страницы на кнопки $arrow подвешивается событие click. Тоесть условно говоря за "одну прокрутку" у Вам может подвешаться 100 событий. Это в свою очередь значит, что после того, как вы нажмете по кнопке "вверх" у Вас с интервалов в 800мс начнем запускаться анимация 100 раз. Соответсвенно каждые 800мс у Вас страница скороллиться наверх, поэтому Вы и не можете проскролить ее вниз.

Решение проблемы, данный кусочек кода вынести за пределы функции:

$arrow.on('click', function(e){
      e.preventDefault();

      $('html, body').animate({
        scrollTop: 0
      },800);
    });

PS: Не забудте переменную $arrow определить

Comments

[Kee_real]

Большое Вам спасибо! На будущее буду знать.