Управление поведением браузера после изменения фрагмента URL

Я застрял на этом несколько часов и не могу найти проблему. У меня также есть проблемы с описанием проблемы, так как я не совсем уверен, где проблема на самом деле. Я искал весь стек stackoverflow и другие сайты, чтобы найти решение, но до сих пор я этого не делал..

Я пытаюсь создать скроллер на одну страницу, используя jQuery. Моя проблема в основном сводится к этому. Всякий раз, когда я просматриваю свою страницу и манипулирую фрагментом URL, введя адресную строку в идентификатор другого элемента на моей странице, он переходит к элементу с идентификатором. Но поскольку я использую фиксированную навигационную панель поверх моей страницы, она отображает часть элемента под фиксированным элементом.

Есть ли способ поймать события keydown/keyup из-за манипуляции с адресным баром, чтобы я мог убедиться, что сегмент отображается с правильным смещением? Есть ли способ создать смещение по умолчанию после изменения фрагмента URL-адреса? Я пробовал событие hashchange в объекте window, но это также срабатывает, когда я обновляю значение location.href.hash в зависимости от того, какой сегмент просматривает пользователь. У меня есть верхнее смещение по умолчанию для моего элемента body, чтобы начальная загрузка работала с фиксированным элементом.

Похоже, что многие другие страницы-страницы игнорируют фрагмент URL-адреса и вообще не обновляют URL-адрес, если навигационная система не находится в верхней части веб-сайта. Таким образом, вы не сможете напрямую ссылаться на определенную часть веб-сайта, если навигация не находится слева или справа.

Часть моего кода:

$(window).load(function(){

var segment = window.location.hash;
if(segment != ""){
    if($(segment) != []){
        var originOfSegment = $(segment).offset().top - 64;
        $("body, html").animate({"scrollTop": originOfSegment + "px"}, 0);
    }
}

$("a[href*='#']").on("click", function(e){

    if(e.preventDefault){
        e.preventDefault();
    }
    else{
        e.returnValue = false;
    }

    var segment = this.hash;

    //navigateTo(segment, 500);

    window.location.hash = segment;

});

$(window).on("scroll", function(){
    var idOfSegment = $(currentSegment).attr("id");
    window.location.hash = idOfSegment;
});

});

Я, вероятно, не первый из них с этой проблемой, но я не могу найти ответ на эту конкретную проблему.

Он легко воспроизводится даже без использования JavaScript для первоначального вычисления и установки смещения для элемента, на который ссылается фрагмент URL.

С точки зрения пользователей:

• Пользователь: Я перехожу на сайт, используя URL-адрес и фрагмент URL-адреса.
• Userrequest: http://example.com/index.html#contact
• Сценарий: скрипт получает запрос, видит фрагмент URL-адреса и вычисляет его, а затем определяет смещение. Сукчес!
• Пользователь: С помощью этой ссылки я открыл форму контакта и отправлю некоторую информацию.
• Пользователь: Следующая вещь, которую я хочу сделать, - вернуться к обзору продукта и использовать адресную панель для этого.
• Userrequest: http://example.com/index.html#products
• Сценарий: событие hashchange запускается, но никакое событие keyup на "enter" не может быть обнаружено, что приводит к неизвестному источнику, из которого произошло событие. Хеш также можно изменить с помощью прокрутки от сегмента к сегменту. Это приводит к элементу, расположенному ниже фиксированной навигационной панели. Поскольку веб-сайт не обновляется, а загружается из кеша, нет никакого загрузочного или готового события, которое я могу использовать для расчета и настройки смещения.