뷰포트 상단에서 앵커 링크를 오프셋하는 방법은 무엇입니까?

상단에서 오프셋이 있는 앵커 링크

앵커 링크를 통해 웹페이지를 탐색할 때 대상 섹션이 뷰포트 상단에 바로 위치하는 경우가 많습니다. . 약간의 여유 공간을 제공하려면 링크된 영역을 페이지 가장자리에서 약간 오프셋하는 것이 바람직합니다.

해결책

scroll-margin-top 속성은 간단한 해결 방법을 제공합니다. 앵커의 이 속성에 값을 추가하면 링크된 위치와 페이지의 위쪽 가장자리 사이에 간격을 만들 수 있습니다. 예를 들어:

<code class="css">#anchor {
  scroll-margin-top: 100px;
}</code>

이 코드는 앵커 링크를 통해 탐색할 때 대상 섹션을 위에서 100px 아래로 이동합니다.

호환성

다행히 이 솔루션은 Chrome, Firefox, Safari, Edge를 포함한 최신 브라우저에서 널리 지원됩니다. 그러나 Internet Explorer와 같은 이전 브라우저와의 호환성은 제한적입니다.

위 내용은 뷰포트 상단에서 앵커 링크를 오프셋하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!