Могу ли я обновить window.location.hash без прокрутки веб-страницы? - PullRequest
Новая
       40

Могу ли я обновить window.location.hash без прокрутки веб-страницы?

26 голосов
/ 14 марта 2009

Используя JavaScript, есть ли способ обновить window.location.hash без прокрутки веб-страницы?

У меня есть кликабельные элементы заголовка, которые переключают видимость div прямо под ними. Мне нужна строка / foo # в истории при нажатии на заголовки, но я не хочу, чтобы страница прокручивалась. Поэтому при переходе от / foo # bar я смогу использовать кнопку «Назад», и при возврате будет виден div, идентификатор которого находится в window.location.hash.

Возможно ли такое поведение?

Ответы [ 6 ]

35 голосов
/ 03 марта 2014

Чтобы изменить хэш без перезагрузки / прокрутки страницы, теперь вы можете просто использовать html5 history.pushState. 

history.pushState(null,null,'#hashexample');

Поддерживается всеми основными браузерами:

http://caniuse.com/history

MDN:

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#The_pushState().C2.A0method

Также обратите внимание, что последний параметр url, который мы здесь используем, может быть любым URL, поэтому он не ограничен хешами.

30 голосов
/ 15 июня 2010

Так просто, как получается 

var scrollmem = $('html,body').scrollTop();
window.location.hash = hash;
$('html,body').scrollTop(scrollmem);
22 голосов
/ 08 апреля 2010

Еще одна вещь, которую вы можете попробовать, это изменить идентификатор элемента, на который временно указывает хеш. Работал на меня! 

function changeHashWithoutScrolling(hash) {
  var id = hash.replace(/^.*#/, ''),
      elem = document.getElementById(id)
  elem.id = id+'-tmp'
  window.location.hash = hash
  elem.id = id
}
2 голосов
/ 03 июня 2016

Основываясь на ответе Санни, я сделал эту функцию, которая также избегает неопределенных и нулевых значений: 

    function changeHashWithoutScrolling(hash) {
        var id;
        var elem;

        id = hash.replace(/^.*#/, '');

        if (id) {
            elem = document.getElementById(id);

            if (elem) {
                elem.id = id + '-tmp';
                window.location.hash = hash;
                elem.id = id;
            }
        }
    }
2 голосов
/ 06 января 2016

Хотел добавить комментарий к ответу Екатерины, но у меня пока нет представителя -

Отличное решение, однако в Chrome у меня не получилось, так как $ ('html'). ScrollTop () всегда возвращает 0 - небольшая правка решает проблему: 

scrollmem = $('html').scrollTop() || $('body').scrollTop();
window.location.hash = hash;
$('html,body').scrollTop(scrollmem);
2 голосов
/ 14 марта 2009

Такое поведение очень возможно. Вам следует взглянуть на некоторые библиотеки, которые были разработаны, чтобы предоставить вам эту функциональность.

Действительно простая история: http://code.google.com/p/reallysimplehistory/ SWFAдрес: http://www.asual.com/swfaddress/

...