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;