고정 헤더에 맞게 조정하기 위해 html 앵커 오프셋

질문 : 고정 헤더에 맞게 조정하기 위해 html 앵커 오프셋

---

앵커가 작동하는 방식을 정리하려고합니다. 페이지 상단에 고정 된 헤더가 있으므로 페이지의 다른 위치에 앵커에 링크하면 페이지가 점프하여 앵커가 페이지 상단에 있고 고정 헤더 뒤에 콘텐츠가 남습니다. 의미가 있습니다). 헤더 높이에서 25px만큼 앵커를 오프셋하는 방법이 필요합니다. HTML이나 CSS를 선호하지만 Javascript도 허용됩니다.

답변

---

자바 스크립트없이 CSS 만 사용할 수 있습니다.

앵커에게 수업을 제공하십시오.

<a class="anchor" id="top"></a> 

그런 다음 앵커를 블록 요소로 만들고 상대적으로 배치하여 앵커가 실제로 페이지에 나타나는 위치보다 높거나 낮은 오프셋에 배치 할 수 있습니다. -250px는 앵커를 250px 위로 배치합니다.

a.anchor {     display: block;     position: relative;     top: -250px;     visibility: hidden; } 

출처 : https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header