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

问题描述

我想清除我的锚的工作方式。我有一个标题固定在页面的顶部，所以当你链接到锚点在页面的其他地方，页面跳转，所以锚点在页面的顶部，留下固定的标题后面的内容（我希望这就说得通了）。我需要一个方法来将锚点从标题的高度偏移25px。

解决方案

你可以使用CSS没有任何javascript。 / p>

给你的锚点一个类：

 < a class = anchorid =top>< / a> 
 

然后，您可以将锚定位置定位为高于或低于实际出现在页面上的位置使其成为块元素并相对定位它。 -250px将定位向上250px

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




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.

解决方案

You could just use CSS without any 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

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

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