상단에 fixed된 메뉴가 있는 페이지에서 해시링크(#) 이동

position:fixed 된 상단메뉴가 있는 페이지에서 해시링크(#)로 이동을 하면 이동하고자 하는 위치가 고정상단메뉴에 의해 덮이게 되서 원하는대로 안나타나는 경우가 발생합니다.

이는 해당페이지 내에서의 이동과 다른페이지로부터의 이동시에도 모두 같은 문제가 발생하게 됩니다.

같은 페이지 내에서의 이동이라면 자바스크립트로 고정된 메뉴높이만큼 더 위로 이동해서 해결 할 수 있지만 다른페이지로부터의 이동은 여전히 해결되지 않습니다.

이런경우 다음의 링크를 통해 해결할 수 있습니다.

http://stackoverflow.com/questions/11386807/adding-an-automatic-offset-to-the-scroll-position-for-all-hash-links-calls

CSS (insert your titlebar height instead of 40px):

.symbol-target {

    padding-top: 40px;

    margin-top: -40px;

    width: 1px; /* '0' will not work for Opera */

    display: inline-block;

}

HTML:

<h3>

    <span class="symbol-target" id="myTarget">&nbsp;</span>

    <a href="#myTarget">My text</a>

</h3>

요점은 padding-top 으로 옵셋으로 원하는 만큼 잡아주고 다시 margin-top 으로 -값으로 땡겨오는거죠. 시각적으로는 '그자리 그대로'가 됩니다만 링크이동시 padding-top 만큼의 옵셋을 가지게 되는거죠.

그러나 여기서 제시한 방법은 display:inline-block 된 요소로서 각각의 레이아웃에 패딩값등이 있다면 여전히 오차가 발생할 것입니다.

그럴때는 그냥 display:block; 잡고 height:1; font-size:0; line-hight:0; 잡고 이동하려는 레이아웃 바로 위에 별도로 자리잡아주는게 좋습니다.

아래 스샷은 각각 Section 2(#sect2)를 클릭했을 때의 결과입니다.

실제로는 height:1px을 줘서 그만큼 50px인 padding-top에서 1만큼 빼줬습니다. width:0; 이나 height:0; 은 IE7에서 안된다는 글을 본듯합니다.

hash_link_offset_sample.html