5

我做了一个很长的页面，我正在我的电脑上测试。由于太长了，所以我在顶部添加了一个目录。目录下方是一些链接，单击这些链接可将您带到页面的特定部分。这是我使用的标记示例：

<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>这些东西。我想让它在您单击链接时将您带到页面的该部分，但该部分将位于屏幕中间，而不是顶部，因此标题不会覆盖任何内容。

4

3 回答 3

1

解决方案

您可以通过设置position: relative;目标<a>元素来做到这一点；只需给标题设置一个高度，然后设置top: -[header height]在<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 演示中将 ' 文本包装在其中的原因。
  • 这不会将目标标题放置在屏幕中间，但会将其放置在标题下方。
于 2013-01-20T16:31:23.017 回答
0

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

于 2013-01-20T16:12:57.993 回答
0

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

...
    <a name="link"></a><br /><br /><br /><br /><br />  
    <h3>Your Heading Here</h3>
    <p>some stuff here</p>
于 2013-01-20T16:14:22.980 回答