Как я могу обновить окно.местоположение.хэш без перехода документа?

Question

Как я могу обновить окно.местоположение.хэш без перехода документа?

у меня есть раздвижная панель, настроенная на моем сайте.

когда он закончил анимацию, я установил хэш так

function() {

   window.location.hash = id;

}

(это обратный вызов, и id назначается ранее).

это работает хорошо, чтобы позволить пользователю закладки панели, а также для версии не JavaScript, чтобы работать.

однако, когда я обновляю хэш, браузер переходит к местоположению. Я думаю, это ожидаемое поведение.

мой вопрос: как может Я предотвращаю это? Т. е. как я могу изменить хэш окна, но не есть ли прокрутка браузера к элементу, если хэш существует? Какой-то event.preventDefault() подобное?

Я использую jQuery 1.4 и плагин scrollTo.

большое спасибо!

обновление

вот код, который меняет панель.

$('#something a').click(function(event) {

    event.preventDefault();

    var link = $(this);

    var id = link[0].hash;



    $('#slider').scrollTo(id, 800, {

        onAfter: function() {



            link.parents('li').siblings().removeClass('active');

            link.parent().addClass('active');

            window.location.hash = id;



            }

    });

});

583 8

jQuery javascript hash scrollto

8 ответов:

Comments

Ничего не найдено.

Attila Fulop · Accepted Answer · 2013-02-04 17:44:07

существует обходной путь с помощью API истории на современных браузерах с резервным вариантом на старых:
if(history.pushState) {
    history.pushState(null, null, '#myhash');
}
else {
    location.hash = '#myhash';
}
кредит идет на Леа Verou

Derek Hunziker · Accepted Answer · 2011-03-24 07:06:19

проблема в том, что вы устанавливаете

Gavin Brock · Accepted Answer · 2013-06-14 15:34:09

дешевое и неприятное решение.. Используйте уродливый #! стиль.

для этого:
window.location.hash = '#!' + id;
читать:
id = window.location.hash.replace(/^#!/, '');
Так как он не соответствует и якорь или идентификатор на странице, он не будет прыгать.

user706270 · Accepted Answer · 2011-04-13 18:02:39

почему бы вам не получить текущую позицию прокрутки, поместить ее в переменную, а затем назначить хэш и вернуть прокрутку страницы туда, где она была:
var yScroll=document.body.scrollTop;
window.location.hash = id;
document.body.scrollTop=yScroll;
это должно работать

aldemarcalazans · Accepted Answer · 2015-10-14 18:50:12

я использовал комбинацию решения Attila Fulop (Lea Verou) для современных браузеров и решения Gavin Brock для старых браузеров следующим образом:
if (history.pushState) {
    // IE10, Firefox, Chrome, etc.
    window.history.pushState(null, null, '#' + id);
} else {
    // IE9, IE8, etc
    window.location.hash = '#!' + id;
}
как заметил Гэвин Брок, чтобы захватить идентификатор обратно, вам придется обработать строку (которая в этом случае может иметь или не иметь "!") следующим образом:
id = window.location.hash.replace(/^#!?/, '');
перед этим я попробовал решение, подобное тому, которое предложил user706270, но оно не очень хорошо работало с Internet Explorer: поскольку его движок Javascript не очень быстро вы можете заметить увеличение и уменьшение прокрутки, что создает неприятный визуальный эффект.

Jon B · Accepted Answer · 2013-11-01 01:16:25

Я не уверен, что вы можете изменить исходный элемент, но как насчет перехода от использования id attr к чему-то другому, например data-id? Затем просто прочитайте значение data-id для вашего хэш-значения, и оно не будет прыгать.

Mike Vallano · Accepted Answer · 2018-04-28 17:04:25

это решение работает для меня.

проблема с установкой location.hash это то, что страница перейдет к этому идентификатору, если он будет найден на странице.

проблема с window.history.pushState заключается в том, что он добавляет запись в историю для каждой вкладки пользователь. Затем, когда пользователь нажимает back кнопка, они переходят на предыдущую вкладку. (это может быть или не быть то, что вы хотите. это было не то, что я хотел).

для меня replaceState - лучший вариант в том, что он только заменяет текущая история, поэтому, когда пользователь нажимает back кнопка, они переходят на предыдущую страницу.
$('#tab-selector').tabs({
  activate: function(e, ui) {
    window.history.replaceState(null, null, ui.newPanel.selector);
  }
});
Проверьте история API docs на MDN.

Andrew · Accepted Answer · 2018-08-29 03:54:58

при использовании Laravel framework у меня были некоторые проблемы с использованием функции route->back (), так как она стерла мой хэш. Чтобы сохранить мой хэш, я создал простую функцию:
$(function() {   
    if (localStorage.getItem("hash")    ){
     location.hash = localStorage.getItem("hash");
    }
}); 
и я установил его в моей другой функции JS следующим образом:
localStorage.setItem("hash", myvalue);
вы можете назвать свои локальные значения хранения так, как вам нравится; мое имя hash.

поэтому, если хэш установлен на PAGE1, а затем вы переходите к PAGE2; хэш будет воссоздан на PAGE1 при нажатии кнопки Назад на странице 2.