Могу ли я обновить окно.Расположение.хэширование без прокрутки веб-страницы?

Question

Используя JavaScript, есть ли способ обновить window?Расположение.хэширование без прокрутки веб-страницы?

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

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

Answer 1

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

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

Answer 2

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

Answer 3

Так легко, как только можно

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

Answer 4

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

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

Answer 5

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

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

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

Answer 6

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

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