웹 페이지 스크롤없이 Window.location.hash를 업데이트 할 수 있습니까?

Question

JavaScript를 사용하면 웹 페이지를 스크롤하지 않고 Window.Location.hash를 업데이트하는 방법이 있습니까?

바로 아래의 div의 가시성을 전환하는 클릭 가능한 제목 요소가 있습니다. 제목을 클릭 할 때 역사상 /foo#바를 원하지만 페이지를 스크롤하는 것을 원하지 않습니다. 따라서 /foo#bar에서 멀어지면 뒤로 버튼을 사용할 수 있고 id가 window.location.hash에있는 Div가 반환시 표시됩니다.

이 행동이 가능합니까?

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

당신이 시도 할 수있는 또 다른 것은 해시가 일시적으로 가리키는 요소의 ID를 변경하는 것입니다. 나를 위해 일했습니다!

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

Answer 5

Catherines Answer에 의견을 추가하고 싶었지만 아직 담당자가 없습니다.

그러나 위대한 솔루션은 Chrome에서 $ ( 'html')로 작동하지 않았습니다. scrolltop ()는 항상 0을 반환합니다 - 사소한 편집은 다음을 해결합니다.

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

Answer 6

Sunny의 답변에 BAS 나는 정의되지 않은 및 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;
            }
        }
    }