한 페이지 아래로 스크롤하는 동안 URL을 변경할 수 있습니까?

한 페이지 아래로 스크롤하는 동안 URL을 변경할 수 있습니까?

아약스로 한 페이지를 스크롤하는 동안 URL을 변경할 수 있습니까?저는 한 페이지에 모두 웹사이트가 있고 이 효과를 얻고 싶습니다.

예:

www.blablabla.com/blog

사용자 아래로 스크롤...

www.blablabla.com/blog/entry-name

해싱에 대해 알아요...URL을 마스킹할 수 있습니까?

이것이 조금 오래된 질문이라는 것을 알지만 브라우저가 바뀌었고, 지금은 포스터가 요청한 것을 할 수 있습니다.이는 대부분의 다른 답변이 더 이상 유효하지 않다는 것을 의미합니다.구글을 사용하는 사람들이 정답을 찾는 데 도움이 될 수 있도록 이를 달성할 수 있는 방법을 게시합니다.

간단히 말해서, 최신 브라우저(HTML 5를 지원하는 브라우저)에서는 할 수 있습니다.이 기사를 한 번 봐주세요.

기본적으로 다음 코드 행으로 요약됩니다.

window.history.pushState("object or string", "Title", "/new-url");

위의 코드를 실행하면 URL이 example.com/new-url, 으로 변경되고 원하는 것을 달성하는 데 도움이 됩니다.

데모의 경우, 이 방법이 사용되는 Webby Awards를 살펴볼 수 있습니다.위 또는 아래로 스크롤하여 주소를 확인합니다.그 효과는 꽤 인상적입니다.

pushState()를 사용하여 해시를 다시 로드하거나 사용하지 않고 브라우저 URL 표시줄에 표시되는 URL을 수정할 수 있습니다.브라우저가 HTML5를 지원하는 한.

https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

아니요. 왜 당신도 그러고 싶은지 모르겠어요.

말씀하신 대로 페이지의 해시에 추가하는 방법밖에 없습니다.

http://www.website.com/blog/#entry-name

그런 다음 페이지의 해당 부분으로 스크롤하려면 다음과 같이 하십시오.

if (window.location.indexOf("#") > 0) {
    var entry_id = window.location.substring(window.location.indexOf("#"));
    $('html, body').animate({
        scrollTop: $(entry_id).offset().top
    }, 2000);
}

편집: 이 작업은 오래 전부터 가능했습니다.window.history.pushState.

https://github.com/browserstate/history.js/history.js 는 어떻습니까?

데이터, 제목에 대한 지속적인 지원을 포함하여 상태 교체.jQuery, MoTools 및 프로토타입을 지원합니다.HTML5 브라우저의 경우 더 이상 해시를 사용할 필요 없이 URL을 직접 수정할 수 있습니다.

창을 사용하여 가능합니다.pushState 메서드입니다.

네, 가능합니다만, 좀 까다롭네요.

만약 당신이 이것을 가지고 있다면.index.html페이지:

  <a id="link-to-later" href="#later">Go to later</a>
  <p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p><p>lorem ipsum</p> 
  <a id="later" name="later">Some later anchor</a>

그런 다음 상단 링크를 클릭하면 페이지를 다시 로드하지 않고 아래 앵커로 이동하며 URL은index.html#later.

를 사용하여window.onscroll이벤트 페이지 아래로 스크롤하는 사용자에게 이벤트를 후크할 수 있습니다.이벤트 핸들러에는 다음과 같은 것이 포함될 수 있습니다.$('#link-to-later').click()사용자의 브라우저가 페이지를 가리키도록 전송합니다.later앵커.

당신은 이것이 너무 거칠어지지 않도록 약간의 일을 해야 할 것이지만, 그것은 할 수 있습니다.

아니요, 보안상의 이유로 Javascript를 사용하여 URL을 변경할 수 없습니다.

언급URL : https://stackoverflow.com/questions/6146560/is-it-possible-to-have-the-url-change-while-you-scroll-down-a-single-page