css - 锚定不到页面顶部，但向下 200px

Question

我在一个元素上有一个锚点，它使导航跳转到那个点。然而，锚点将其捕捉到视口的顶部。由于做了一个固定的导航，它现在隐藏在后面。

是否可以使锚点不捕捉到视口的顶部，而是在页面下方 200 像素？

网站：http ://www.haselden.co.uk/james/docs

Answer 1

我能够通过将 CSS 实际应用于锚点来解决这个问题。所以对于主播我会有这个...

<a name="AnchorName" class="anchor"></a>

然后在CSS中我会有这个......

.anchor {
   position: relative;
   top: -[number]px;
}

请注意，我注意到锚在不同浏览器中移动的距离有些不准确。因此，可能无法使事物完美对齐。如果您希望它完美定位，您可能需要一些花哨的 jquery 或其他东西。

Answer 2

肮脏的解决方案，但确实有效，感谢@SteveJenkins 提出这个问题，尽管我添加了一个调整。

<a name="AnchorName" class="anchor">anchor text [invisible]</a>

.anchor {
   position: relative;
   top: -[number]px;
   visibility:hidden;
}

Answer 3

现在使用 CSS3 更容易了。详细的解释在这里：https ://css-tricks.com/hash-tag-links-padding/但简短的版本是

a::before {
    display: block;
    content: " ";
    margin-top: -70px;
    height: 70px;
    visibility: hidden;
}

Answer 4

我有一个类似的问题，并遇到了这个问题。没有答案像我想要的那样工作。我不得不走得更远，想分享我的发现。

先来点上下文。我正在做某种错误解析，将有趣的区域突出显示到 HTML 呈现的源代码查看页面中。有一个允许快速导航的索引表，它位于一个固定的高度可变的标题中。这就解释了为什么我在这个问题页面上结束了。

我的问题是锚占用了视觉空间并移动了源代码，将文本移动了锚的长度并弄乱了代码格式。我尝试了多种方法使其不占用空间但仍然存在于页面中，以便锚点起作用。最后，我决定选择退格字符而不是.（根据@noregt 的评论） 。

每个锚点都是动态生成的<a name="[some unique name]" class="anchor">&#008;</a>，然后在固定标头中引用。

一点点 Javascript 有助于动态标题高度和锚点定位（抓取所有锚点并动态调整顶部填充）：

<script type="text/javascript"><!--
var height = document.getElementById("head").offsetHeight;
var a = document.getElementsByClassName('anchor');
// src: http://stackoverflow.com/questions/9329446/for-each-over-an-array-in-javascript
for(key in a) {
    if (a.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
        a[key].style.paddingTop = height + 'px';
    }
}
--></script>

该解决方案非常适用于动态生成的具有可变高度但固定标题的锚点。希望这可以帮助别人。

Answer 5

添加一个低于 200px 的隐藏元素，并在其上制作一个锚点。