Question

我已经使用css创建了一个“粘贴标题”，它总是在页面顶部可见，而其他内容放在它下面。在标题中我有一些内部链接。问题是，当点击链接时，页面会滚动，以便目标位于页面顶部 - 由我的粘贴标题隐藏 - 而不是在其下方。

有关如何解决此问题的任何建议？

的CSS：

#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3.5em;
    padding:0;
    margin: 0;
}

#container {
    width: 100%;
    margin: 3.5em 0 0 0;
    padding: 0;
    overflow:auto;
}

#content {
    padding: 0 4em;
    margin: 0;
}

HTML：

<body>

    <div id="header">
        <div id="content">
            <p>
                <a href="#xyz">XYZ</a>
            </p>
        </div> <!--end content-->
    </div> <!--end header-->

    <div id="container">
        <div id="content">
            <p>A lot of text.</p>
            <a name="xyz"></a>
            <p>A lot of text</p>
        </div><!--end content-->
    </div><!--end container-->

</body>

Answer 1

首先，最好使用id而不是name的块 - 这是更标准的方式。

然后，将类添加到锚点，然后使其具有绝对位置+使用等于标题高度的负顶部margin移动它。

看看这个小提琴：http://jsfiddle.net/kizu/gfXJJ/

或者，对于支持伪元素的浏览器，您可以添加一个具有所需高度的浏览器，并通过负上边距补偿它的高度，因此它将作为您建立链接的块的开头。这样做可以将id添加到已存在的元素中，而不是创建额外的元素。

以下是包含伪元素的版本：http://jsfiddle.net/kizu/gfXJJ/2/

或者您可以向padding本身的margin元素添加热门id和广告{{1}} - 但在这种情况下，可能会出现背景问题，因为块在顶部物理延伸。

Answer 2

一点点javascript（这里使用的jQuery）可以做到：

$('#header a').click(function (e) {
  e.preventDefault();

  var offset = $('a[name=' + $(this).attr('href').substr(1) + ']').offset();

  $('html, body').animate({ scrollTop: offset.top - $('#header').outerHeight() }, 'fast');
});

这将找到具有与所单击链接的href属性匹配的name属性的元素，然后动画滚动到该元素的位置减去标题的高度。

http://jsfiddle.net/blineberry/bTa8b/

Answer 3

我认为这个问题与此链接中的问题重叠：offsetting an html anchor to adjust for fixed header，它提供了更多可能的解决方案。我相信这些问题可以合并，但我没有这方面的特权。（这就是我作为答案输入此内容的原因相同，虽然我知道它应该是一个评论。但我不允许发表评论。）

Answer 4

一件简单的事情就是将<a name="xyz"></a>放置在文本的稍高处。

这需要一些试验和错误，但这可能是最快/最简单的事情。

您可以做的另一件事是在点击链接时动态添加margin或padding。

Answer 5

您还可以在CSS文件中为xyz片段设置一个与上边距一样高的上边距。这可能会导致结果HTML页面出现空白但是......

Answer 6

首先获取标题内容和容器内部的唯一ID。也许你可以在内部链接的标题中放入一个ul。设置封装器内容的位置绝对值，等等！

我们有什么地方可以看看你的问题吗？

Answer 7

伪元素似乎并不适用于所有场景。我很幸运，只是应用负上边距和正顶部填充来抵消负边距。

例如。 <a id="xyz" style="margin-top:-50px; padding-top:50px">Title</a>

粘性标题＆amp;内部链接

7 个答案: