앵커 링크를 ID 위의 일부 픽셀로 이동하십시오.

Question

현재 웹 사이트에서 작업 중이며 앵커 문제가 있습니다. 내 머리글은 고정되어 있으며 앵커를 클릭하면 다른 페이지로 이동하는 방법을 알려주지 만 80 픽셀의 마녀는 내 고정 머리글의 높이입니다. 이 내가 앵커를 클릭 있지만 80 픽셀 이하로 스크롤해야 할 때 아코디언 새로운 페이지에 열 만든 스크립트는 여기입니다 ... 내 .jsp로 파일

<a href="${parentLink}#${menuItem.name}" class="${menuItem.classes[anchorClasses]}"> 

을에 이상이있는 일부 코드와 JS가 그 내 아코디언 새 페이지

$(document).ready(function() { 
    if (location.hash != null && location.hash != "") { 
     $('.collapse').removeClass('in'); 
     $(location.hash + '.collapse').collapse('show'); 
    } 
}); 

에 오픈하게 나는 너희들이 더 많은 정보를 필요가 있다고 생각, 그래서 나에게 당신을 도울 수 아무것도 묻지. 나는 이것에 대해 새롭고 마녀 코드가 여기에 게시되어 여러분이 문제가 무엇인지 깨닫도록 도와 주어야합니다. 감사합니다 (:

Answer 1

한 가지 일반적인 방법은 보이지 않는 의사 요소를 이런 CSS를 통한 링크의 원래 목표 요소 :

#your_anchor_id::before { 
    display: block; 
    content: " "; 
    margin-top: -80px; 
    height: 80px; 
    visibility: hidden; 
    pointer-events: none; 
} 

이 볼 다른시키지 않고 앵커 주 요소 위에 80 픽셀되도록하는 방식으로 그 ID를 가진 요소를 "확장"할 변경합니다.