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