window.location.hash = ""; предотвратить прокрутку наверх?

Question

на моем веб-сайте я установил адрес URL с помощью

window.location.hash = 'project_name';

но если я хочу очистить URL адреса от любых хешей (когда я закрываю проект) и я установил

window.location.hash = '';

бывает, что страница прокручивается до верхней страницы

есть ли способ очистить URL без каких-либо побочных эффектов?

спасибо

Answer 1

Событие onhashchange есть, но его нельзя отменить надежно во всех браузерах, чтобы предотвратить прокрутку. Лучшее решение - записать положение прокрутки перед изменением местоположения хэша и затем сбросить его. Например, следующий код будет ловить щелчок по любой ссылке - которая не останавливает распространение - со значением href # и предотвращает вертикальную прокрутку страницы:

document.onclick = function (evt) {
    var tgt = (evt && evt.target) || event.srcElement,
        scr = document.body.scrollTop;

    if (tgt.tagName == "A" && tgt.href.slice(-1) == "#") {
        window.location.href = "#";
        document.body.scrollTop = scr;           
        return false;
    }
}

Если вы меняете хеш через скрипт, вы можете использовать следующий код:

var scr = document.body.scrollTop;
window.location.href = '#';
document.body.scrollTop = scr;

Любой из этих методов можно настроить, чтобы избежать прокрутки отдельных элементов или горизонтальной прокрутки страницы. Обратите внимание, что вы можете удалить весь хэш (включая #), не вызывая навигацию или прокрутку в современных браузерах, вызывая функции pushState или replaceState.

Answer 2

У меня была такая же проблема, и я пришел сюда для ответа. Только что выяснил, что есть очень простой способ:

window.location.hash = ' ';

По сути, вы устанавливаете его на «#», поскольку пространство не существует, оно не перемещается. При повторном посещении страницы она также не обрабатывается иначе, чем просто #

Answer 3

Прежде всего, спасибо за ваши решения - @ Andy-E и @ JustMaier.

Однако у меня возникла проблема с тем, чтобы заставить его работать, основываясь на втором кодовом блоке Энди E в Firefox и коде JustMaier в Chrome.

Итак, я сделал смесь этих двух блоков кода, и она работает так же, как и предполагалось в обоих браузерах

var scr = document.body.scrollTop;

window.location.hash = ' ';

document.body.scrollTop = scr;

Мои два цента, ничего не забирающие у настоящих ниндзя JS, упомянутых выше.:)

Answer 4

document.body.scrollTop устарело , также последние версии Chrome здесь нестабильны. Следующее должно работать:

  var topPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
  window.location.href = '#';
  document.documentElement.scrollTop = topPos;