修复了页眉与页内锚点重叠的问题

Question

如果我在 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    |
| ...                             |      | ...                             |
+---------------------------------+      +---------------------------------+

Answer 1

如果您不能或不想设置新类，请添加固定高度 ::before 伪元素到 :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);

Answer 2

html {
  scroll-padding-top: 70px; /* height of sticky header */
}

来自： https://css- trics.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/

Answer 3

我也有同样的问题。
我通过向锚元素添加一个类来解决这个问题，并将顶栏高度作为 padding-top 值。

<h1><a class="anchor" name="barlink">Bar</a></h1>

我使用了这个CSS：

.anchor { padding-top: 90px; }

Answer 4

我使用这种方法：

/* add class="jumptarget" to all targets. */

.jumptarget::before {
  content:"";
  display:block;
  height:50px; /* fixed header height*/
  margin:-50px 0 0; /* negative fixed header height */
}

它在每个目标之前添加一个不可见的元素。它适用于 IE8+。

以下是更多解决方案：
http://nicolasgallagher.com/jump-links-and-viewport-positioning/

Answer 5

从 4/2021 开始，有一个非 hacky 且完全跨浏览器的解决方案：

h1 {
  scroll-margin-top: 50px
}

它是 CSS 滚动捕捉规范。在所有现代浏览器上运行。 （有关更多上下文，请参阅有关 的 MDN 页面滚动边距顶部，滚动填充顶部）

Answer 6

官方 Bootstrap 采用的答案：

*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; // Set the Appropriate Height
  height: 75px; // Set the Appropriate Height
  visibility: hidden; 
}

积分

合并

Answer 7

我发现处理这个问题的最好方法是（用固定元素高度替换 65px）：

div:target {
  padding-top: 65px; 
  margin-top: -65px;
}

如果您不喜欢使用 target 选择器，您也可以这样做：

.my-target {
    padding-top: 65px;
    margin-top: -65px;
}

注意：如果目标元素的背景颜色与其父元素不同，则此示例将不起作用。
例如：

<div style="background-color:red;height:100px;"></div>
<div class="my-target" style="background-color:green;height:100px;"></div>

在这种情况下，my-target 元素的绿色将覆盖其 65px 的父级红色元素。
我没有找到任何纯 CSS 解决方案来处理这个问题，但如果你没有其他背景颜色，这个解决方案是最好的。

Answer 8

虽然一些建议的解决方案适用于同一页面内的片段链接（=哈希链接）（例如向下滚动的菜单链接），但我发现当您想要时，它们都无法在当前的 Chrome 中工作使用来自其他页面的片段链接。

因此，从头开始调用 www.mydomain.com/page.html#foo 将不会使用任何给定的 CSS 解决方案或 JS 解决方案来抵消当前 Chrome 中的目标。

还有一个 jQuery 错误报告 描述了问题的一些细节。

解决方案

到目前为止，我发现在 Chrome 中真正有效的唯一选择是 JavaScript，它不称为 onDomReady，但有延迟。

// set timeout onDomReady
$(function() {
    setTimeout(delayedFragmentTargetOffset, 500);
});

// add scroll offset to fragment target (if there is one)
function delayedFragmentTargetOffset(){
    var offset = $(':target').offset();
    if(offset){
        var scrollto = offset.top - 95; // minus fixed header height
        $('html, body').animate({scrollTop:scrollto}, 0);
    }
}

摘要

如果没有 JS 延迟解决方案，可能可以在 Firefox、IE、Safari 中运行，但不能在 Chrome 中运行。

Answer 9

您现在可以使用 scroll-margin-top ，相当广泛采用。

只需将以下 CSS 添加到要滚动到的元素即可：

.element {
  scroll-margin-top: 2em;
}

Answer 10

使用上面提到的“anchor:before”方法，我可以轻松地使用 CSS 和 HTML。我认为它效果最好，因为它不会在你的 div 之间创建大量的填充。

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

它似乎不适用于页面上的第一个 div，但您可以通过向第一个 div 添加填充来解决这个问题。

#anchor-one{padding-top: 60px;}

这是一个工作小提琴： http://jsfiddle.net/FRpHE/24/

Answer 11

对于 Chrome/Safari/Firefox，您可以添加 display: block 并使用负边距来补偿偏移，例如：

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

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

Answer 12

我没有看到简单使用 :target 列为选项的选项。我发现

:target { margin-top: -100px;顶部内边距：100px； }

似乎适用于所提供的场景。 :target 还与所有现代浏览器兼容。 https://caniuse.com/?search=%3Atarget

Answer 13

刚刚发现了另一个纯 CSS 解决方案，它对我来说就像一个魅力！

html {
  scroll-padding-top: 80px; /* height of your sticky header */
}

发现于此网站 ！

Answer 14

您可以尝试以下操作：

<style>
h1:target { padding-top: 50px; }
</style>

<a href="#bar">Go to bar</a>

<h1 id="bar">Bar</h1>

将顶部填充值设置为标题的实际高度。这将在标题顶部引入一个轻微的额外间隙，但只有当用户跳转到锚点然后向上滚动时，它才会可见。我现在已经为我的网站制定了该解决方案，但它仅在页面顶部显示一个小的固定栏，没有太高的内容。

Answer 15

您可以使用 jQuery 来做到这一点：

var offset = $('.target').offset();
var scrollto = offset.top - 50; // fixed_top_bar_height = 50px
$('html, body').animate({scrollTop:scrollto}, 0);

Answer 16

我对上面列出的答案没有任何运气，最终使用了这个完美运行的解决方案......

在您想要设置锚点的地方创建一个空白区域。

<span class="anchor" id="section1"></span>
<div class="section"></div>

并应用以下类：

.anchor {
  display: block;
  height: 115px;       /* same height as header */
  margin-top: -115px;  /* same height as header */
  visibility: hidden;
}

即使各部分具有不同颜色的背景，此解决方案也将起作用！我在此链接中找到了解决方案。

Answer 17

它对我有用：

HTML 链接到锚点：

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

HTML 锚点：

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

CSS ：

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

Answer 18

我在这里和其他地方的许多答案都遇到了很多麻烦，因为我的书签锚点是常见问题解答页面中的部分标题，因此偏移标题并没有帮助，因为其余内容只会保留在原来的位置。所以我想我会发帖。

我最终所做的是几个解决方案的组合：

1. CSS：

   <前><代码>.书签{
   顶部边距：-120px；
   底部填充：120px；
   显示：块；
   }

其中“120px”是您的固定标题高度（可能加上一些边距）。

2. 书签链接 HTML：

   您的常见问题解答是什么？
   

3. 添加书签的内容 HTML:

   ;
   您的常见问题解答是什么？
   一些常见问题解答文本，后跟...
   ...更多常见问题解答文本等...
   

此解决方案的好处是 span 元素不仅是隐藏的，而且本质上是折叠的，不会填充您的内容。

我不能对这个解决方案抱有太多的信任，因为它来自大量不同的资源，但在我的情况下它最适合我。

您可以在此处查看实际结果。

Answer 19

我使用锚元素的scroll-margin-top属性解决了我的问题

scroll-margin-top: 100px;

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top

Answer 20

对于我的纯粹主义者来说，这感觉有点老套，但作为纯 css 解决方案，您可以使用 :target 选择器向活动锚定元素添加填充：

html, body {height:100%; min-height:100%; margin:0;}
body {min-height:200%;}
header {display:inline-block; position:fixed; font-size:1.5em; height:100px; top:0; left:0; right:0; line-height:100px; background:black; text-align:center;}
header a {color:#fff;}
section {padding:30px; margin:20px;}
section:first-of-type, section:target {padding-top:130px;}

<header><a href="#one">#One</a> <a href="#two">#two</a> <a href="#three">#three</a></header>
<section id="one"><h1>One</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>
<section id="two"><h1>Two</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>
<section id="three"><h1>Three</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>

Answer 21

我正在使用 @Jpsy 的答案，但出于性能原因，我仅在 URL 中存在哈希值时才设置计时器。

$(function() {
      // Only set the timer if you have a hash
      if(window.location.hash) {
        setTimeout(delayedFragmentTargetOffset, 500);
      }
  });

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

Answer 22

通过添加 scroll-padding-top 属性来解决这个问题的简单方法，只需将此代码添加到您的 CSS 文件中即可看到神奇效果。

对于动态高度和间隙变量

html {   
    --headerHeight:79px;   
    --gap:40px;   
    scroll-padding-top: calc(var(--headerHeight) + var(--gap)); 
}

对于固定间隙值

html { 
    scroll-padding-top: 120px; 
}

Answer 23

我发现我必须同时使用 两者 MutttenXd 和 Badabam 的 CSS 解决方案，因为第一个在 Chrome 中不起作用，而第二个则不起作用在 Firefox 中不起作用：

a.anchor { 
  padding-top: 90px;
}

a.anchor:before { 
  display: block;
  content: "";
  height: 90px;
  margin-top: -90px;
}

<a class="anchor" name="shipping"></a><h2>Shipping (United States)</h2>
...

Answer 24

我发现最干净的方式是以下一种：

  #bar::before {
    display: block;
    content: " ";
    margin-top: -150px;
    height: 150px;
    visibility: hidden;
    pointer-events: none;
  }

Answer 25

使用 jQuery 的侵入性最小的方法：

链接：

<a href="#my-anchor-1" class="anchor-link">Go To Anchor 1</a>

内容：

<h3 id="my-anchor-1">Here is Anchor 1</a>

脚本：

$(".anchor-link").click(function() {
    var headerHeight = 120;
    $('html, body').stop(true, true).animate({
        scrollTop: $(this.hash).offset().top - headerHeight
    }, 750);
    return false;
});

通过将锚链接类分配给链接，其他链接（如折叠式或选项卡控件）的行为不会受到影响。

这个问题不需要javascript，但另一个更受欢迎的问题 由于这个问题而关闭，我无法在那里回答。

Answer 26

我需要一些适用于入站链接、页面上的链接的东西，并且可以通过 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 中发现问题+

Answer 27

<div style="position:relative; top:-45px;">
    <a name="fragment"> </a>
</div>

这段代码应该可以解决问题。将 45px 替换为标题栏的高度。

编辑：如果使用 jQuery 是一个选项，我也成功使用 jQuery.localScroll 并设置了偏移值。 offset 选项是 jQuery.scrollTo 的一部分，jQuery.localScroll 是基于它构建的。此处提供演示：http://demos.flesler.com/jquery/scrollTo/ （第二个窗口，在“偏移”下）

Answer 28

这是一个适用于 IE 的完整 jquery 解决方案：

假设导航栏元素是这样的：

<ul>
    <li><a class="navigation" href="/#contact-us">Contact us</a></li>
    <li><a class="navigation" href="/#about-us">About us</a></li>
</ul>

您可以使用以下 jquery 片段来偏移滚动：

$(function() {
    $("a.navigation").click(function(event) {
        event.preventDefault();
        offSetScroll($(this));
    });
    offSetScrollFromLocation(window.location.href.toLowerCase());
});

function offSetScroll(anchor) {
    var href = anchor.attr("href");
    offSetScrollFromLocation(href);
}

function offSetScrollFromLocation(href) {
    //Change this according to the height of the navigation bar
    var fromTop = 250;
    if(href.indexOf("#")<=0)
        return;
    var hash=href.substring(href.indexOf("#"));
    var targetOffset = $(hash).offset().top-fromTop;
    $('html, body').animate({scrollTop: targetOffset}, 400, function(e) {

    });
}

Answer 29

使用 :before 实现效果很好，直到我们意识到伪元素实际上覆盖并阻止了位于伪元素区域内的指针事件。在 :before 上使用诸如 pointer-events: none 之类的东西，甚至直接在锚点上使用也没有任何影响。

我们最终做的是使锚点的定位绝对，然后将其位置调整为固定区域的偏移/高度。

在不阻止指针事件的情况下进行偏移锚点

.section-marker {

    position: absolute;
    top: -300px;
}

这样做的价值在于，我们不会阻止任何可能落入这 300 像素范围内的元素。缺点是从 Javascript 获取该元素的位置需要考虑该偏移量，因此必须调整其中的任何逻辑。

Answer 30

这就是当您单击导航时我最终到达正确位置的方法。我添加了一个用于导航点击的事件处理程序。然后你可以使用“scrollBy”来向上移动偏移量。

var offset = 90;

 $('.navbar li a').click(function(event) {
    event.preventDefault();
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, -offset);
 });