Навигация:
- Я создаю панель навигации для сайта, которая содержит 4 точки (вертикальная навигация по точкам), когда пользователь наводит на нее курсор, она раскрывается и ссылки отображаются с использованием временной шкалы GSAP.
- Я также использую API истории для обновления хэша местоположения при прокрутке (который прекрасно работает только с прокруткой), который использует метод replaceState.
Проблема:
- Когда пользователь наводит курсор на панель навигации и нажимает на ссылки, хэш местоположения не обновляется и вместо этого остается тем же (тот же хэш, что и пользователь).
- Я полагаю, что это как-то связано с функцией, которая на самом деле прокручивает сайт, но не могу указать на это.
- Я также получаю ужасную ошибку в консоли, я провел некоторые исследования, но могу видеть только вещи, связанные с Angular (с которыми я не знаком).
(«Изменения состояния истории регулирования для предотвращения зависания браузера»)
Код:
$(window).on("scroll", checkPosition);
/*
Scroll To Anchor Function
*/
$('a[href^="#"]').on('click', function(e) {
e.preventDefault();
var speed = 800;
var target = this.hash;
var $target = $(target);
if(position != target){
//Scroll to
$('html, body').animate({
'scrollTop': $target.offset().top
}, speed, 'swing', function() {
//Callback onced finished animating
});
} else {
wiggleElement($(".circle"));
}
});
/*
Update Location Hash
*/
function checkPosition() {
var scrolled = $(window).scrollTop();
$("section").each(function(){
var section_pos = $(this).offset().top - 100;
var section_height = $(this).height();
if (section_pos <= scrolled && section_pos + section_height > scrolled) {
position = '#' + $(this).attr('id');
if(history.replaceState) {
history.replaceState(null, null, position);
}
else {
location.hash = position;
}
$('.circle').removeClass("current");
if (!is_open) {
$(position + '_circle').addClass("current");
}
}
})
}
Большое спасибо заранее.