Почему событие после скролла работает некорректно?

Question

[Валера Удав]

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

Скрипт такой:

// Плавный скролл
	$('a[href^="#"], a[href^="."]').on('click', function(){ // если в href начинается с # или ., то ловим клик
		var scroll_el = $(this).attr('href'); // возьмем содержимое атрибута href
		if ($(scroll_el).length != 0) { // проверим существование элемента чтобы избежать ошибки
			$('html, body').animate({ scrollTop: $(scroll_el).offset().top }, 500); // анимируем скроолинг к элементу scroll_el

			// Выделение элемента после скролла
			$(window).on('scroll', function(){
				if ( $(window).scrollTop() == 0 ){
					$("#cover").fadeIn(700).delay(500).fadeOut(700);
				}
				return false;
			});

		}
		return false; // выключаем стандартное действие
	});

Траблы следующие:
Если один раз нажать на кнопку возвращения в топ, всё срабатывает как надо, но если нажать её (или любую другу) повторно то анимация появления затемнения срабатывает 2-3 раза подряд. Так же если кнопка возвращения в топ была нажата хотябы один раз, аниманиция затемнения начинает появляться даже если просто мышкой проскроллить наверх.

Пытался использовать .off() но совсем никак не помогало.

Нужно както избавиться от этих траблов...

Answer 1

[Валентин Дубровский]

у animate третий аргумент это callback, который сработает после завершения анимация.
Должно быть так:

$('html, body').animate({ scrollTop: $(scroll_el).offset().top }, 500, function(){
    if ( $(window).scrollTop() == 0 ){
        $("#cover").fadeIn(700).delay(500).fadeOut(700);
    }
});

Comments

[Валера Удав]

Спасибо! Проблема со скроллом от мышки решилась, но почему то всё равно если нажать возврат в топ второй раз, то затемнение происходит по несколько раз подряд