URL anchor값 얻기

anchor에 대해서 간단히 몇 자 적습니다.

아래와 같이 하나의 html 문서 내에서 bookmark처럼 사용할 수 있는데요.
'제목으로' 링크를 누르면 'title1'이 정의된 곳으로 화면이 이동하는 기능.

제목 : 이러쿵저러쿵

제목으로

여기서 단순히 이동만 하는게 아니고, URL 뒤에 #xxx 형태로 값이 기록되기 때문에(xxx.html#title1)
자바스크립트를 사용해서 동적인 페이지를 만드는 웹사이트의 경우에 '현재 상태를 기록'하는 용도로 활용할 수 있을 것 같습니다.

예를 들어 ajax로 구현된 게시판이 있다고 하면...

1
2
3

이 때, ajax를 사용하지 않는 게시판이라면 URL은 list.do?page=3 라는 식이 되겠죠.
페이지를 표시하기 전에 URL의 page=3 값을 읽어서 3페이지의 글들을 화면에 뿌려주도록 처리할테구요.

여기서는 URL이 list.do#3이 될테고,
javascript에서 #3 값을 읽어서 3페이지를 보여주게끔 처리할 수 있습니다.
이렇게 놓고 보니 정말로 (사용자 입장에서는) 3페이지에 'bookmark' 표시를 한 것처럼 동작하겠네요 ㅎㅎ

URL anchor 값은 페이지 리로딩 없이 바꿀 수 있기 때문에,
페이지를 동적으로 만드는 경우에 궁합이 잘 맞을거 같습니다.

그러면 이제 저 #3 값을 얻는 방법을 알아야겠죠.

예를 들어, URL이 xxx.html#home 이라고 가정하면

var locationHash = location.hash; // locationHash == '#home'

위와 같이 얻을 수 있습니다.

다양하게 활용할 수 있을 것 같네요.