偏移html锚以调整为固定标头[重复]

@AlexanderSavin的解决方案WebKit对我来说在浏览器中效果很好。

我还不得不使用：目标伪类施加样式到所选择的锚来调整填充FF，Opera＆IE9：

a:target {
  padding-top: 40px
}

请注意，此样式不适用于Chrome/，Safari因此您可能必须使用css-hacks，条件注释等。

我也想注意到，亚历山大的解决方案之所以有效，是因为目标元素是inline。如果您不想链接，则只需更改display属性即可：

<div id="myanchor" style="display: inline">
   <h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
</div>

您还可以添加带有跟随属性的锚点：

(text-indent:-99999px;)
visibility: hidden;
position:absolute;
top:-80px;    

并给父容器一个相对位置。

对我来说很完美。

具有可链接ID（可提供导航栏高度）的隐藏范围标签如何处理：

#head1 {
  padding-top: 60px;
  height: 0px;
  visibility: hidden;
}


<span class="head1">somecontent</span>
<h5 id="headline1">This Headline is not obscured</h5>

这是小提琴：http : //jsfiddle.net/N6f2f/7

添加到Ziav的答案中（感谢Alexander Savin），我需要使用老式代码，<a name="...">...</a>因为我们<div id="...">...</div>在代码中将其用于其他目的。我在使用时出现了一些显示问题display: inline-block-每个<p>元素的第一行都被证明是略微缩进的（在Webkit和Firefox浏览器上）。我最终尝试了其他display价值观，并display: table-caption为我完美地工作。

.anchor {
  padding-top: 60px;
  margin-top: -60px;
  display: table-caption;
}

我.vspace在每个h1元素之前添加了40px-height 元素来固定锚点。

<div class="vspace" id="gherkin"></div>
<div class="page-header">
  <h1>Gherkin</h1>
</div>

在CSS中：

.vspace { height: 40px;}

它的工作非常好，而且空间不会阻塞。

我在TYPO3网站中遇到了这个问题，在该网站中所有“内容元素”都包裹着以下内容：

<div id="c1234" class="contentElement">...</div>

我更改了渲染，因此它的渲染方式如下：

<div id="c1234" class="anchor"></div>
<div class="contentElement">...</div>

而这个CSS：

.anchor{
    position: relative;
    top: -50px;
}

固定的顶部栏高40像素，现在锚点再次工作，并在顶部栏下方开始10像素。

此技术的唯一缺点是您无法再使用:target。

您可以使用a[name]:not([href])css选择器在没有ID的情况下实现此目的。这只是寻找名称不带href的链接，例如<a name="anc1"></a>

规则示例可能是：

a[name]:not([href]){
    display: block;    
    position: relative;     
    top: -100px;
    visibility: hidden;
}

与其在页面的其余内容下覆盖固定位置导航栏（整个页面主体都是可滚动的），不如考虑使用具有静态导航栏的不可滚动主体，然后将页面内容放在一个下面是绝对定位的可滚动div。

也就是说，拥有这样的HTML ...

<div class="static-navbar">NAVBAR</div>
<div class="scrollable-content">
  <p>Bla bla bla</p>
  <p>Yadda yadda yadda</p>
  <p>Mary had a little lamb</p>
  <h2 id="stuff-i-want-to-link-to">Stuff</h2>
  <p>More nonsense</p>
</div>

...和CSS像这样：

.static-navbar {
  height: 100px;
}
.scrollable-content {
  position: absolute;
  top: 100px;
  bottom: 0;
  overflow-y: scroll;
  width: 100%;
}

这样可以以一种简单，简单的方式获得所需的结果。此行为与上面建议的某些聪明的CSS黑客之间唯一的行为差异是，滚动条（在呈现一个的浏览器中）将附加到内容div，而不是页面的整个高度。您可能会或可能不会认为这是理想的。

这是一个JSFiddle演示了此操作。

对于同一问题，我使用了一个简单的解决方案：在每个锚点上放置40px的padding-top。

更改位置属性的解决方案并非总是可行的（它可能会破坏布局），因此我建议这样做：

HTML：

<a id="top">Anchor</a>

CSS：

#top {
    margin-top: -250px;
    padding-top: 250px;
}

用这个：

<a id="top">&nbsp;</a>

尽量减少重叠，并将font-size设置为1px。空锚在某些浏览器中不起作用。

您可以在不使用js且不更改html的情况下进行操作。仅限于CSS。

a[id]::before {
    content: '';
    display: block;
    height: 50px;
    margin: -30px 0 0;
}

这将在每个带有id的a-tag之前附加一个伪元素。调整值以匹配标题的高度。

对于现代浏览器，只需将CSS3：target选择器添加到页面。这将自动应用于所有锚点。

:target {
    display: block;    
    position: relative;     
    top: -100px;
    visibility: hidden;
}

我的解决方案结合了CMS的目标和选择器。其他技术没有考虑锚点中的文本。将高度和负边距调整为所需的偏移量...

:target::before {
    content: '';
    display: block;
    height:      180px;
    margin-top: -180px;
}

受Alexander Savin启发的纯CSS解决方案：

a[name] {
  padding-top: 40px;
  margin-top: -40px;
  display: inline-block; /* required for webkit browsers */
}

（可选）如果目标仍然不在屏幕上，则可能需要添加以下内容：

  vertical-align: top;

FWIW对我有用：

[id]::before {
  content: '';
  display: block;
  height:      75px;
  margin-top: -75px;
  visibility: hidden;
}

我也在寻找解决方案。就我而言，这很容易。

我有一个包含所有链接的列表菜单：

<ul>
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
<li><a href="#three">three</a></li>
<li><a href="#four">four</a></li>
</ul>

并在其下的标题下。

<h3>one</h3>
<p>text here</p>

<h3>two</h3>
<p>text here</p>

<h3>three</h3>
<p>text here</p>

<h3>four</h3>
<p>text here</p>

现在，因为我在页面顶部有一个固定的菜单，所以我不能仅仅将其移到我的标签上，因为那将在菜单后面。

相反，我将span标签放入具有正确ID的标签内。

<h3><span id="one"></span>one</h3>

现在使用2行CSS正确放置它们。

h3{ position:relative; }
h3 span{ position:absolute; top:-200px;}

更改最高值以匹配固定标头（或更多）的高度。现在，我认为这也可以与其他元素一起使用。

我找到了这个解决方案：

<a name="myanchor">
    <h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
</a>

这不会在内容上造成任何差距，并且锚链接非常好用。

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

给您的锚课程：

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

然后，可以通过将锚定为一个块元素并将其相对定位，将锚定的位置比页面上实际显示的位置高或低。-250px将锚定位置上移250px

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