Question

我做了一个很长的页面，我正在我的电脑上测试。由于时间太长，我在顶部添加了一个目录。在目录下是一些链接，点击后，您将转到页面的特定部分。这是我使用的标记的一个例子：

<h4>Table of Contents</h4>
<ul>
    <li><a href="#gotolink">Link</a></li>  
</ul>
<h3><a name="gotolink">Link</a></h3>
    <p>some stuff here</p>

工作正常。问题是我也有一个固定的标题，就像你总是看到标题无论你在页面上的哪个位置，当我点击目录下的链接时它会带我到页面的那一部分但是标题最终覆盖了<h3>的东西。我想这样做，以便当你点击一个链接时，它会带你到页面的那一部分，但该部分将位于你的屏幕中间，而不是顶部，所以标题不会涵盖任何内容。

Answer 1

解决方案

您可以在目标position: relative;元素上设置<a>来执行此操作;只需为标题设置一个设定的高度，然后在top: -[header height]上设置<a>。

示范

Here's a JSFiddle。点击长页面顶部的Link（请原谅大量的Lorum Ipsum）。该页面将跳转到红色标题。

CSS

body {
    margin-top: 20px;    /* Same height as header */
}

#header {
    position: fixed;
    background: black;
    color: white;
    height: 20px;
    line-height: 20px;
    width: 100%;
    top: 0;
}

h3 a {
    position: relative;
    top: -20px;    /* Negative header height */

    /* Don't select anchor */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

注意事项

标题必须具有明确的高度，因此可以正确设置偏移。
由于<a>偏离包含元素（在这种情况下为<h3>），因此使用user-select: none禁用用户选择。这意味着<a>中的任何文本都不可选择。这就是为什么我没有在JSFiddle演示中包装<h3>的文本。

这不会将目标标题放在屏幕中间，然而 将放置在标题下方。

Answer 2

我建议添加一些JavaScript，当点击标记您页面的命名部分的锚标记时，向下滚动x个像素以补偿静态标题。

Answer 3

也许你应该尝试这样的事情：

...
    <a name="link"></a><br /><br /><br /><br /><br />  
    <h3>Your Heading Here</h3>
    <p>some stuff here</p>

当我链接到页面的特定部分时，我遇到了问题？

3 个答案:

解决方案

示范

CSS

注意事项