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

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

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

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

Ответы

Ответ 1

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

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

Ответ 2

Как легко получить

var scrollmem = $('html,body').scrollTop();
window.location.hash = hash;
$('html,body').scrollTop(scrollmem);

Ответ 3

Чтобы изменить хеш без перезагрузки/прокрутки страницы, теперь вы можете просто использовать 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-адресом, поэтому он не ограничивается хешей.

Ответ 4

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

function changeHashWithoutScrolling(hash) {
  var id = hash.replace(/^.*#/, ''),
      elem = document.getElementById(id)
  elem.id = id+'-tmp'
  window.location.hash = hash
  elem.id = id
}

Ответ 5

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

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

scrollmem = $('html').scrollTop() || $('body').scrollTop();
window.location.hash = hash;
$('html,body').scrollTop(scrollmem);

Ответ 6

В ответ на запрос от Sunny я сделал эту функцию, которая также избегает undefined и nulls:

    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;
            }
        }
    }