偏移 html 锚点以调整固定标题 [英] offsetting an html anchor to adjust for fixed header

问题描述

我正在尝试清理我的锚的工作方式.我有一个固定在页面顶部的标题，因此当您链接到页面其他位置的锚点时，页面会跳转，因此锚点位于页面顶部，将内容留在固定标题后面(我希望那讲得通).我需要一种方法来将锚点从标题的高度偏移 25 像素.我更喜欢 HTML 或 CSS，但也可以接受 Javascript.

I am trying to clean up the way my anchors work. I have a header that is fixed to the top of the page, so when you link to an anchor elsewhere in the page, the page jumps so the anchor is at the top of the page, leaving the content behind the fixed header (I hope that makes sense). I need a way to offset the anchor by the 25px from the height of the header. I would prefer HTML or CSS, but Javascript would be acceptable as well.

推荐答案

你可以只使用 CSS 而无需任何 JavaScript.

You could just use CSS without any javascript.

给你的主播上课:

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

然后，您可以将锚定为比它在页面上实际出现的位置高或低的偏移量，方法是将其设为块元素并进行相对定位.-250px 将定位点向上 250px

You can then position the anchor an offset higher or lower than where it actually appears on the page, by making it a block element and relatively positioning it. -250px will position the anchor up 250px

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

这篇关于偏移 html 锚点以调整固定标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！