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

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

window.location.hash = 'project_name';

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

window.location.hash = '';

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

Есть ли способ очистить URL без какого-либо побочного эффекта?

спасибо

Ответ 1

Здесь есть событие onhashchange, но его нельзя надежно отменить в браузерах, чтобы предотвратить прокрутку. Лучшее решение - записать положение прокрутки перед изменением местоположения хэша и reset после этого. Например, следующий код будет щелкать по любой ссылке - которая не останавливает распространение - с значением 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;
    }
}

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

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

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

Ответ 2

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

window.location.hash = ' ';

В основном вы устанавливаете его на "#", так как пространство не существует, оно не перемещается. Когда вы пересматриваете страницу, она также не относится к ней иначе, чем просто #

Ответ 3

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

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

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

var scr = document.body.scrollTop;

window.location.hash = ' ';

document.body.scrollTop = scr;

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

Ответ 4

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

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