(1) 상단고정메뉴가 있는 상태에서. #링크된 메뉴를 클릭합니다

(2) 상단고정메뉴 밑으로 겹쳐서 링크된 위치가 스크롤되어 보여집니다

(3) 스크립트를 적용하면 상단고정메뉴 아래로 보여집니다^^

간단하지만, 찾아보다가 원하시는 분들이 계실것 같아서 올려봅니다^^

이미 아시는 분들도 많겠지만

모르시는 분들을 위해 남깁니다. 고수분들은 패스 해 주세요^^

상단의 메뉴를 fixed 해서 스크롤시 상단에 고정되게 많이 사용하고 있습니다.

하지만, 같은 페이지에서 탭등을 이용해서 # 링크로 스크롤해서 해당 위치로 가면

상단메뉴에 가려서 맨위내용이 보이질 않습니다.

그전에 css 등을 이용해서.. 해보았지만 복잡해서

스크립트 하나로 처리했으면 해서 올려봅니다.

단, 단점이 있습니다.

페이지에서 조금이라도 스크롤이 아래로 움직여야 정상작동합니다.

아래로 스크롤 없이 # 해시링크를 클릭하면, 정확하게 위치가 맞지 않습니다.

아시는 분들은 스크립트를 수정해서 고치실 수 있을 것 같습니다.

소스삽입은 해당 페이지 맨 하단에 추가하거나

모든 페이지에 적용하고 싶다면, 테마등의 tail.php / tail.sub.php / shop.tail.php 

맨 하단에 추가하시면 됩니다^^

[미리보기] 해시(#)링크 클릭시 상단고정메뉴 아래로 표시되게 하기

https://series8.kr/shop/item.php?it_id=S230001

- 이 페이지에서 조금 내려가면, 탭으로 상품정보 / 기능미리보기 / 사용후기 .... 등의 탭이 있습니다.

- 탭을 클릭하면 상단고정메뉴 아래에 선택한 탭 정보가 표시됩니다^^

[미리보기] 관리자 페이지에서 해시(#)링크 클릭시 상단고정메뉴 아래로 표시되게 하기

우주정복오리지날 S23 데모 체험 (영카트5.5 NEW관리자)

 https://oojoos23.creamcon.kr/adm.cream/

 일반체험아이디: kim  비밀번호: 1111  

---------------------------------------------------------------------- 

우주정복오리지날 C23 데모 체험 (그누보드5.5 NEW관리자)

 https://oojooc23.creamcon.kr/adm.cream/

 일반체험아이디: kim  비밀번호: 1111 

----------------------------------------------------------------------

우주정복23 관리자 데모페이지에 로그인 합니다

상단메뉴바의 "설정 > 환경설정 > 탭 " 을 클릭하시면 됩니다

페이지에서 조금이라도 스크롤이 아래로 움직여야 정상작동합니다.

아래로 스크롤 없이 # 해시링크를 클릭하면, 정확하게 위치가 맞지 않습니다.

아시는 분들은 스크립트를 수정해서 고치실 수 있을 것 같습니다.

< 삽입할 스크립트 소스 >

 80 은 상단에서 띄울 높이이므로, 상단고정메뉴높이를 고려해서 원하는 높이로 변경하시면 됩니다

<!-- 앵커로 이동시 상단 가려지는 부분만큼 아래로 표시되게 스크립트 시작 { -->
<script>
// The function actually applying the offset
function offsetAnchor() {
  if (location.hash.length !== 0) {
    window.scrollTo(window.scrollX, window.scrollY - 80);//상단 80 픽셀 띄움
  }
}
// Captures click events of all <a> elements with href starting with #
$(document).on('click', 'a[href^="#"]', function(event) {
  // Click events are captured before hashchanges. Timeout
  // causes offsetAnchor to be called after the page jump.
  window.setTimeout(function() {
    offsetAnchor();
  }, 0);
});
// Set the offset when entering page with hash present in the url
window.setTimeout(offsetAnchor, 0);
</script>
<!-- 앵커로 이동시 상단 가려지는 부분만큼 아래로 표시되게 스크립트 끝 // -->

감사합니다. 올 한 해도 모두들 잘 풀리기를 바래 봅니다^^