Когда я быстро нажимаю на навигацию, я вижу следующую ошибку в консоли:
Uncaught ReferenceError: $target is not defined
at HTMLAnchorElement.<anonymous> (main.js:31)
at HTMLAnchorElement.dispatch (jquery-1.9.1.min.js:3)
at HTMLAnchorElement.v.handle (jquery-1.9.1.min.js:3)
Даже если в трассировке стека есть ссылка на jquery, эта ошибка происходит независимо от jQuery и является ошибкой в JavaScript. Подробнее об этой ошибке читайте здесь: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined
Эту конкретную трассировку стека вы можете прочитать снизу вверх - поэтому вы увидите, что событие было обработано и отправлено в строке 3 jquery-1.9.1.min.js (строки в минимизированном ресурсе в большинстве случаев бесполезны) затем анонимная функция в вашем main.js была вызвана и вылетела в строке 31.
Выдержка из этой строки выглядит следующим образом:
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash;
$target = $(target); # this is line 31
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
В вашем случае похоже, что вы просто пропустили объявление переменной $target. Просто поставьте var перед $target как:
var $target = $(target);
И ваша функция должна работать хорошо.
Кстати, есть хороший способ отладки. Просто добавьте выражение debugger; близко к месту возникновения ошибки, и вы увидите подробную информацию об отладке. Как:
Дополнительно:
Если вы проверите другую ошибку, у вас есть:
Uncaught Error: jquery-1.9.1.min.js:4 Uncaught Error: Syntax error,
unrecognized expression: ../index.php#home
at Function.st.error (jquery-1.9.1.min.js:4)
at ft (jquery-1.9.1.min.js:4)
at wt (jquery-1.9.1.min.js:4)
at Function.st [as find] (jquery-1.9.1.min.js:4)
at init.find (jquery-1.9.1.min.js:4)
at new init (jquery-1.9.1.min.js:3)
at b (jquery-1.9.1.min.js:3)
at HTMLAnchorElement.<anonymous> (main.js:201)
at Function.each (jquery-1.9.1.min.js:3)
at init.each (jquery-1.9.1.min.js:3)
В трассе, где на самом деле начинается проблема, есть at HTMLAnchorElement.<anonymous> (main.js:201). Обычно можно ожидать, что ошибка очень и очень редко встречается в jQuery. Чаще всего ваш ввод просто падает там.
В вашем случае. Давайте проверим main.js: 201:
//nav-active
function onScroll(event){
var scrollPosition = $(document).scrollTop();
$('.menu-list a').each(function () {
var currentLink = $(this);
var refElement = $(currentLink.attr("href")); # this is line 201
if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
$('.menu-list a').removeClass("active");
currentLink.addClass("active");
}
else{
currentLink.removeClass("active");
}
});
}
Давайте посмотрим на строку 201:
var refElement = $(currentLink.attr("href"));
здесь мы можем проверить, что мы имеем в currentLink.attr("href"), очевидно (из сообщения об ошибке) - ../index.php#home - поэтому вы пытаетесь создать элемент со следующим селектором: $('../index.php#home') вместо этого, я думаю вы пытались сделать $('#home') - если это так, просто обновите ваш фрагмент следующим образом:
//nav-active
function onScroll(event){
var scrollPosition = $(document).scrollTop();
$('.menu-list a').each(function () {
var currentLink = $(this);
var linkHref = currentLink.attr("href"); // extract the href attribute from link
var anchor = linkHref.split("#").pop(); // split by # and take the last part
var refElement = $("#" + anchor); // use the anchor extract to use it as id selector
// add refElement.length check - to just continue if the element actually exist
if (refElement.length && refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
$('.menu-list a').removeClass("active");
currentLink.addClass("active");
}
else{
currentLink.removeClass("active");
}
});
}