Question

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

是否可以使锚点不会捕捉到视口的顶部，而是向下翻页200px？

网站：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

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

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

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

每个锚点都像<a name="[some unique name]" class="anchor"></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 4

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

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

Answer 5

添加一个隐藏元素200px，然后改为锚点。

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

5 个答案: