окно.местоположение.хэш = ; предотвратить прокрутку вверх?

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

window.location.hash = 'project_name';

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

window.location.hash = '';

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

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

Благодарность


javascript fragment-identifier
person Francesco    schedule 17.01.2011    source источник
comment
Вы можете назначить несуществующий якорь, но на самом деле это не очистит URL: D   -  person polarblau    schedule 17.01.2011

Ответы (4)


arrow_upward
31
arrow_downward

Есть событие 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.

person Andy E    schedule 17.01.2011
comment
Вы также можете временно создать другой элемент с этим id в scrollTop. - person alex; 27.04.2011
comment
к вашему сведению, он не работает в Firefox и большую часть времени работает только в Chrome. Он входит в функцию ohhashchange, но браузер по-прежнему прокручивается (также пытался предотвратить использование по умолчанию). - person JCarter; 18.07.2012
comment
@JCarter: вы правы, я удалил эту часть. Другая часть моего ответа, вероятно, лучшее решение, я улучшил его. Спасибо :-) - person Andy E; 19.07.2012
comment
Взгляните на этот ответ, решил мою проблему. - person Shadab Mehdi; 24.11.2015
comment
в 2019 году этот метод не работает в Chrome. - person ChaseMoskal; 01.08.2019
comment
history.pushState(null, null, "#") оказалось современным решением, однако имейте в виду, что это не вызовет событие hashchange - person ChaseMoskal; 01.08.2019

arrow_upward
15
arrow_downward

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

window.location.hash = ' ';

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

person JustMaier    schedule 19.09.2012
comment
Это должен быть принятый вопрос, на мой взгляд - person Nico; 02.04.2014

arrow_upward
8
arrow_downward

Во-первых, спасибо за ваши решения - @Andy-E и @JustMaier.

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

Поэтому я смешал эти два блока кода, и он работает так, как задумано в обоих браузерах.

var scr = document.body.scrollTop;

window.location.hash = ' ';

document.body.scrollTop = scr;


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

person SinSync    schedule 14.03.2013

arrow_upward
1
arrow_downward

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

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