固定页头重叠页内锚

如果我在HTML页面中有一个非滚动头，固定在顶部，有一个定义的高度:

是否有一种方法可以使用URL锚(#fragment部分)让浏览器滚动到页面中的某一点，但仍然尊重固定元素的高度，而不需要JavaScript的帮助?

http://example.com/#bar

WRONG (but the common behavior):         CORRECT:
+---------------------------------+      +---------------------------------+
| BAR///////////////////// header |      | //////////////////////// header |
+---------------------------------+      +---------------------------------+
| Here is the rest of the Text    |      | BAR                             |
| ...                             |      |                                 |
| ...                             |      | Here is the rest of the Text    |
| ...                             |      | ...                             |
+---------------------------------+      +---------------------------------+

当前回答

这对我来说很管用:

HTML链接到锚点:

<a href="#security">SECURITY</a>

HTML锚:

<a name="security" class="anchor"></a>

CSS:

.anchor::before {
    content: "";
    display: block;
    margin-top: -50px;
    position: absolute;
}

2017-05-28 21:49:46

其他回答

如果你不能或不想设置一个新类，在CSS的:target伪类中添加一个固定高度的::

:target::before {
  content: "";
  display: block;
  height: 60px; /* fixed header height*/
  margin: -60px 0 0; /* negative fixed header height */
}

或者使用jQuery相对于:target滚动页面:

var offset = $(':target').offset();
var scrollto = offset.top - 60; // minus fixed header height
$('html, body').animate({scrollTop:scrollto}, 0);

2015-03-03 04:34:32

对于Chrome/Safari/Firefox，你可以添加一个display: block，并使用负边距来补偿偏移量，如下所示:

a[name] {
    display: block;
    padding-top: 90px;
    margin-top: -90px;
}

参见示例http://codepen.io/swed/pen/RrZBJo

2016-01-13 14:50:09

一个非常简单的CSS答案是把它放在你的样式表的顶部:

a{padding-top: 90px;}
a:link{padding-top: unset;}

第一种样式管理所有锚标记，第二种样式使用超链接锚标记。

注意:这目前适用于Firefox和Edge，但不适用于Chrome。

2018-03-08 01:53:41

我创建了一个带有一些换行符的div，并给出了id，然后把我想要显示的代码放在下面。然后链接将带你到图像上方的空间，头部将不再碍事:

<a href="#image">Image</a>
<div id="image"><br><br></div>
<img src="Image.png">

当然，您可以根据需要更改换行符的数量。这对我来说非常有效，但不确定是否有任何问题，我仍在学习HTML。

2018-12-22 11:57:42

我需要一些东西，适用于入站链接，页面上的链接，并可以通过JS的目标，以便页面可以响应头部高度的变化

HTML

<ul>
  <li><a href="#ft_who">Who?</a></li>
  <li><a href="#ft_what">What?</a></li>
  <li><a href="#ft_when">When?</a></li>
</ul>
...
<h2 id="ft_who" class="fragment-target">Who?</h2> 
...
<a href="#">Can I be clicked?</a>
<h2 id="ft_what" class="fragment-target">What?</h2>
...
<h2 id="ft_when" class="fragment-target">When?</h2>

CSS

.fragment-target {
    display: block;
    margin-top: -HEADER_HEIGHTpx;
    padding-top: HEADER_HEIGHTpx;
    z-index: -1;
}

z-index: -1允许片段目标上方“填充区域”中的链接仍然是可点击的，正如@MuttenXd在他的回答中所评论的那样

我还没有在IE 11、Edge 15+、Chrome 38+、FF 52+或Safari 9.1+中发现问题

2019-03-06 18:38:44

固定页头重叠页内锚

推荐文章

最新文章

标签