페이지내 hash 이동하기

브라우저 주소창에 hash값을 id로 페이지내에서 이동해야 할 경우가 있다.

http://www.test.co.kr/list/list.html#d_20200330

window.location.hash로 hash값을 얻을 수 있다.

var hash = window.location.hash;	//#d_20200330

아래는 window.location.hash로 얻은 hash값을 moveToHash()함수에 전달하여 호출함으로써 페이지내에서 해당 hash값을 id로 하는 div로 이동하는 코드이다.

var hash = window.location.hash;

function moveToHash(hash){
   if(hash.length > 0){
      var selector = document.querySelector(hash);
      $('.acc_head a', $(selector)).trigger('click');	//click이벤트를 트리거해야 할 경우
      setTimeout(function(){
         $(window).scrollTop($(selector).offset().top);
      }, 300)
   }
}

moveToHash(hash);

$(window).bind('hashchange', function(){
   var hash = window.location.hash;
   moveToHash(hash);
});

페이지가로드되고 URL에 # ...을 추가하면 moveToHash 함수가 실행되지 않으므로 해당 id로 이동하지 않는다.

대신 hashchange 이벤트를 사용할 수 있다. 이렇게하면 해시가 변경 될 때마다 moveToHash 함수를 실행하여 해당 id로 이동할 수 있다.

관련문서:
https://stackoverflow.com/questions/6857982/location-hash-problems-when-manually-entering-url-script-is-not-run

location.hash problems when manually entering url, script is not run