Css 粘头&；内部链接_Css_Html

Css 粘头&；内部链接

css html

Css 粘头&；内部链接,css,html,Css,Html,我使用css制作了一个“粘性标题”，它总是在页面顶部可见，而其他内容则放在页面下方。在标题中，我有一些内部链接。问题是，当点击链接时，页面就会滚动，这样目标就位于页面的顶部——被我的粘性标题隐藏——而不是仅仅位于页面下方对如何解决这个问题有什么建议吗 css: html: 很多文字大量文本一件简单的事情就是将放在文本的稍高位置这需要一些尝试和错误，但这可能是最快/最简单的方法您可以做的另一件事是在单击链接时动态添加边距或填充。您还可以为CSS文件中的xyz片段设置与粘性标题一

我使用css制作了一个“粘性标题”，它总是在页面顶部可见，而其他内容则放在页面下方。在标题中，我有一些内部链接。问题是，当点击链接时，页面就会滚动，这样目标就位于页面的顶部——被我的粘性标题隐藏——而不是仅仅位于页面下方

对如何解决这个问题有什么建议吗

css:

html:




很多文字
大量文本

一件简单的事情就是将

放在文本的稍高位置

这需要一些尝试和错误，但这可能是最快/最简单的方法

您可以做的另一件事是在单击链接时动态添加

边距

或

填充

。

您还可以为CSS文件中的xyz片段设置与粘性标题一样高的顶部边距。这可能会导致结果HTML页面出现空白…

从获取标题和容器中内容部分的唯一ID开始。也许你可以在内部链接的标题中添加ul。将内容在包装器中的位置设置为绝对，等等

有什么地方可以查看您的问题吗？

一点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属性的元素，然后将滚动动画设置为该元素的位置减去标题的高度

首先，最好使用带有

id

的块，而不是

name

——这是更标准的方法

然后，将类添加到锚点，然后使其具有绝对位置，并将其移动，使其顶部<代码>边距等于页眉高度

看看这把小提琴：

或者，对于支持伪元素的浏览器，您可以添加一个具有所需高度的元素，并通过负上边距补偿其高度，因此它将作为您要创建链接的块的开始。这样，您可以将

id

s添加到已经存在的元素中，而不是创建额外的元素

以下是带有伪元素的版本：

或者，您可以将顶部

填充

和负

边距

添加到具有

id

本身的元素：-但在这种情况下，可能会出现背景问题，因为块在顶部进行了物理扩展。

我相信此问题与此链接中的问题重叠：这提供了更多可能的解决方案。我相信这些问题可以合并，但我没有这样做的特权。（这与我将此作为答案输入的原因相同，尽管我知道它应该是一个注释。但我不允许评论。）

伪元素似乎在所有情况下都不起作用。我很幸运地应用了负上边距和正上边距来抵消负边距

例如，

标题

<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>

$('#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');
});