html - 我在链接到页面的特定部分时遇到问题？

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> 中的任何文本是不可选择的。这就是为什么我没有包装 <h3> JSFiddle 演示中的文本。
• 这不会将目标标题放在屏幕中间，但是它会将其放在标题下方。