javascript - 偏移html锚以调整为固定的标头[重复](offsetting an html anchor to adjust for fixed header [duplicate])

Question

This question already has an answer here:

(这个问题已经在这里有了答案：)

• Fixed page header overlaps in-page anchors 32 answers

  (固定页面标题与页面内定位点重叠 32个答案)

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.

(我需要一种将锚点从标头高度偏移25像素的方法。)

I would prefer HTML or CSS, but Javascript would be acceptable as well.

(我更喜欢HTML或CSS，但是Javascript也可以接受。)

  ask by Matt Dryden translate from so

Answer 1

You could just use CSS without any javascript.

(您可以只使用CSS而无需任何JavaScript。)

Give your anchor a class:

(给您的锚课程：)

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

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

(-250px将锚定位置上移250px)

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