[javascript] 문서를 뛰어 넘지 않고 window.location.hash를 어떻게 업데이트합니까?

웹 사이트에 슬라이딩 패널이 설치되어 있습니다.

애니메이션이 끝나면 해시를 이렇게 설정했습니다.

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;

            }
    });
});

답변

if(history.pushState) {
    history.pushState(null, null, '#myhash');
}
else {
    location.hash = '#myhash';
}

window.location.hash = 'panel-' + id.replace('#', '');

$(function(){
    var h = window.location.hash.replace('panel-', '');
    if (h) {
        $('#slider').scrollTo(h, 800);
    }
});

var foundHash;
setInterval(function() {
    var h = window.location.hash.replace('panel-', '');
    if (h && h !== foundHash) {
        $('#slider').scrollTo(h, 800);
        foundHash = h;
    }
}, 100);

window.location.hash = '#!' + id;

id = window.location.hash.replace(/^#!/, '');

var yScroll=document.body.scrollTop;
window.location.hash = id;
document.body.scrollTop=yScroll;

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(/^#!?/, '');

$('#tab-selector').tabs({
  activate: function(e, ui) {
    window.history.replaceState(null, null, ui.newPanel.selector);
  }
});