固定页眉与页内锚点重叠答案

【问题标题】：Fixed page header overlaps in-page anchors固定页眉与页内锚点重叠
【发布时间】：2013-04-07 22:16:17
【问题描述】：

如果我在 HTML 页面中有一个非滚动标题，固定在顶部，具有定义的高度：

有没有办法使用 URL 锚点（#fragment 部分）让浏览器滚动到页面中的某个点，但仍然尊重固定元素的高度 无需 JavaScript 的帮助？

http://example.com/#bar

错误（但常见的行为）：正确： +----------------------------------+ +-------------- ------------------+ | BAR/////////////////// 标题 | | ///////////////////// 标题 | +----------------------------------+ +-------------- ------------------+ |这是文本的其余部分 | |酒吧 | | ... | | | | ... | |这是文本的其余部分 | | ... | | ... | +----------------------------------+ +-------------- ------------------+

【问题讨论】：

相关：stackoverflow.com/questions/10732690/…
css-tricks.com/hash-tag-links-padding
@ax 是的，这是最好的答案。还要检查其中的nicolasgallagher.com/jump-links-and-viewport-positioning/demo。这对我来说效果最好：.dislocate50px, #bar { padding: 50px 0 0; margin: -50px 0 0; -webkit-background-clip: content-box; background-clip: content-box; }
我正在寻找一种解决方案，该解决方案 * 适用于来自同一页面或其他页面的锚点，* 并且可以调整向下翻页按键，以便内容不会被标题剪切，*并允许 sib-div 页脚使用 content-div 向上滚动。还没找到解决办法！但我必须说，我认为正确的方法是针对整个内容 div，而不是每个单独的锚。 stackoverflow.com/questions/51070758/…
@ax. CSS-tricks.com 有一篇关于scroll-padding-top 的更好的新文章：css-tricks.com/… 相应答案：stackoverflow.com/a/56467997/247696

标签： html url anchor

【解决方案1】：

<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/（第二个窗口，在“偏移”下）

【讨论】：

这个解决方案确实有效，但它不是万无一失的，它需要针对不同的浏览器进行大量微调:(很好尝试。我正在寻找一个没有额外标记的解决方案。
可惜这太乱了，这意味着你不能只使用 ID。很想找到解决方案，我已经尝试了各种方法。

【解决方案2】：

你可以试试这个：

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

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

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

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

【讨论】：

Mh.不错，但仍然是一个 hack（遗憾的是，在 IE 中不起作用）。

【解决方案3】：

我使用这种方法：

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

【讨论】：

查看 Badabam 提供的链接，我使用了第二种解决方案，它适用于 Chrome 和 Firefox
在最新的 Firefox（PC 上的 55.0.3）上进行了测试，现在可以使用了。 :-)

【解决方案4】：

你可以用 jQuery 做到这一点：

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

【讨论】：

不是“.target”，应该是“:target”
@MertS.Kaplan ".target" 是类“目标”。

【解决方案5】：

我遇到了同样的问题。我通过向锚元素添加一个类来解决它，顶部栏高度作为 padding-top 值。

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

我使用了这个 CSS：

.anchor { padding-top: 90px; }

【讨论】：

@Tomalak 请注意，此解决方案使填充区域内的链接不可点击。要解决此问题，您必须使用 z-index，并将链接值设置为高于锚点的值。记住你的 topbar 应该有最高的 z-index 值，所以当你滚动时页面的内容不会浮动在 topbar 上。
由于 WebKit fixed position bug 导致标头消失，因此无法在 Chrome v28 中使用。 This answer 在我的情况下成功了。
MuttenXd.. 你是我的英雄。我的网站上有奇怪的非功能链接问题（与锚无关）让我发疯。你不可点击的评论真的很有帮助。我欠你的大！
按照 Roy Shoa 的回答中的建议，添加 margin-top: -90px; 以抵消填充造成的差距。
我使用了.anchor:target {padding-top: 90px;}，所以它只在他们使用锚标签时添加了填充。这样，如果页面加载在顶部，并不总是有一堆填充。仅当它加载页面上较低的特定点时。

【解决方案6】：

使用上面提到的“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/

【讨论】：

【解决方案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 解决方案来处理这个问题，但如果你没有其他背景颜色，这个解决方案是最好的。

【讨论】：

【解决方案8】：

如果您不能或不想设置新类，请在 CSS 中的 :target 伪类中添加一个固定高度的 ::before 伪元素：

: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);

【讨论】：

这是一个非常适合我的解决方案，不会在我的页面布局中塞满其他任何东西。
CSS 解决方案在与 WebKit 中的列表一起使用时出现问题。看：stackoverflow.com/questions/39547773/…
如果目标有顶部内边距或边框则不起作用，因为它依赖于margin-collapse。
:target 简直太棒了！
当目标在我的弹性框中时，这不起作用。

【解决方案9】：

这是一个完整的 jquery 解决方案，可以在 IE 中运行：

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

<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 sn -p来偏移滚动：

$(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) {

    });
}

【讨论】：

我可以使用 Thunder 中这段代码的略微修改版本。我在此页面、stackoverflow.com/questions/10732690/… 和stackoverflow.com/questions/10732690/… 上尝试了许多纯 CSS 和更简单的解决方案，但由于我的要求，它们无法使用。该页面是一个常见问题解答页面，有许多锚点可以定位到页面内外，因此可能有很多空白点。在下一条评论中继续......
为了让它对我有用，这里有一些小的改动： (1) 将 href.index 行中的 "

【解决方案10】：

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

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

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

【讨论】：

【解决方案11】：

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

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

还有一个jQuery bug report描述了问题的一些细节。

解决方案

到目前为止，我发现在 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。

【讨论】：

我得出了相同的结论和解决方案。似乎其他人都忘记了使用主题标签的外部链接。
我今天遇到了这个问题，我已经使用了你的解决方案。虽然看起来你不需要超时。这也可以作为 IIFE。
@kwiat1990：是的，这是可能的——但前提是你的 JS 放在 HTML 代码的最后。否则你的滚动目标可能还没有在 DOM 中。实际上，这就是使用 onDomReady 的全部意义所在。所以我猜超时版本是稳定的方法。
这个答案是唯一适用于外部链接的答案。但是，当在同一页面中调用链接时，它对我不起作用:(有什么想法吗？
@Augusto 您找到解决方案了吗？我也有同样的问题。

【解决方案12】：

在我的纯粹主义者看来，这有点 hacky，但作为一个纯 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>

【讨论】：

这根本不是 hacky！很好的解决方案。
这只是在目标部分上方创建了一个巨大的填充空间，您在向上滚动时很容易注意到这一点。非常hacky的解决方案

【解决方案13】：

添加一个带有“paddingtop”的类，这样它就可以工作了；）

<h1><a class="paddingtop">Bar</a></h1>

对于 css 你有：

.paddingtop { 
   padding-top: 90px; 
}

【讨论】：

【解决方案14】：

我发现我必须同时使用 both 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>
...

【讨论】：

【解决方案15】：

官方引导采用的答案：

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

Credits

Merge

【讨论】：

此解决方案在与 WebKit 中的列表一起使用时会出现问题。看：stackoverflow.com/questions/39547773/…
请注意，如果目标元素本身恰好有display: flex; 或padding-top，这将不起作用。在这些情况下，请使用专用的锚元素（如 <a name="my_link">{leave this empty}</a>）。
它可以防止点击目标元素上方/之前的链接/元素。之前它可能是两个弊端中最小的一个，但现在人们应该只使用scroll-padding-top。

【解决方案16】：

我正在使用@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();
      }
  };

【讨论】：

OP 要求不要使用 javascript。
适用于外部链接，但不适用于页内链接。

【解决方案17】：

// handle hashes when page loads
// <http://stackoverflow.com/a/29853395>
function adjustAnchor() {
  const $anchor = $(':target');
  const fixedElementHeight = $('.navbar-fixed-top').outerHeight();
  if ($anchor.length > 0)
    window.scrollTo(0, $anchor.offset().top - fixedElementHeight);
}
$(window).on('hashchange load', adjustAnchor);
$('body').on('click', "a[href^='#']", function (ev) {
  if (window.location.hash === $(this).attr('href')) {
    ev.preventDefault();
    adjustAnchor();
  }
});

【讨论】：

不幸的是，这不符合“没有 Javascript”的限制。

【解决方案18】：

我使用这种方法是因为出于某种原因，提出的其他解决方案都没有真正适合我。我保证我试过了。

section {
   position: relative;
   border-top: 52px solid transparent; /* navbar height +2 */
   margin: -30px 0 0;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
}

section:before {
   content: "";
   position: absolute;
   top: -2px;
   left: 0;
   right: 0;
   border-top: 2px solid transparent;
}

如果您愿意，可以将 section 替换为一个类。

来源：Jump links and viewport positioning

在 Firefox 45 和 Chrome 52 上测试。
引导版本：3.3.7

对于那些不相信我的人，我准备了一个带有解决方案的 jsfiddle：SOLUTION

【讨论】：

【解决方案19】：

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

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

不阻塞指针事件的偏移锚点

.section-marker {

    position: absolute;
    top: -300px;
}

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

【讨论】：

【解决方案20】：

它对我有用：

到锚点的 HTML 链接：

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

HTML 锚点：

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

CSS：

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

【讨论】：

【解决方案21】：

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

var offset = 90;

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

【讨论】：

解决了问题，但不是“没有 Javascript 的帮助”部分...

【解决方案22】：

CSS 技巧将是一种解决方法。可以使用 jQuery 实现适用于所有场景的适当解决方案。

参考https://codepen.io/pikeshmn/pen/mMxEdZ

方法：我们使用 document.getElementById('header').offsetHeight 得到固定导航的高度 并将滚动偏移到这个值。

var jump=function(e){  

e.preventDefault();                        //prevent "hard" jump
  var target = $(this).attr("href");       //get the target

      //perform animated scrolling
      $('html,body').animate(
        {
          scrollTop: $(target).offset().top - document.getElementById('header').offsetHeight - 5  //get top-position of target-element and set it as scroll target
        },1000,function()                  //scrolldelay: 1 seconds
        {
          location.hash = target;          //attach the hash (#jumptarget) to the pageurl
        });
      }

  $(document).ready(function()
  {
    $('a[href*="#"]').bind("click", jump); //get all hrefs
    return false;
  });

PS：

它包括标题和目标之间 5 像素的漂亮差异
滚动效果不硬，比较流畅；平滑滚动

【讨论】：

OP 要求不要使用 javascript。

【解决方案23】：

一个非常简单的 CSS 唯一答案是将其放在样式表的顶部：

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

第一种样式规范所有锚标记，其中第二种样式使用超链接锚定标记。

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

【讨论】：

【解决方案24】：

我觉得最干净的方法是：

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

【讨论】：

【解决方案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，但 the other more popular question 因为这个问题而被关闭，我无法在那里回答。

【讨论】：

【解决方案26】：

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

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

CSS：

.bookmark {
    margin-top:-120px;
    padding-bottom:120px; 
    display:block;
}

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

书签链接 HTML：

<a href="#01">What is your FAQ question again?</a>

书签内容 HTML：

<span class="bookmark" id="01"></span>
<h3>What is your FAQ question again?</h3>
<p>Some FAQ text, followed by ...</p>
<p>... some more FAQ text, etc ...</p>

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

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

你可以看到实际结果here。

【讨论】：

非常感谢您的分享！尽管线程很老，但似乎仍然没有一个规范的解决方案来解决这个问题。
+SteveCinq 你读懂了我的想法——我遇到了同样的问题，共享解决方案无法按预期工作。在跨度中添加带有锚点的<span>，以及添加填充和边距对我有用。非常感谢您抽出时间来提交这个答案，尽管线程已经很老了！
在尝试了这么多不同的技术之后，我打算添加类似的东西，我最终有了相同的想法。在任何应该作为锚点的 div 开始之后，我只包含一个带有锚点类的 span 元素和它的 id。我实际上使用了这些属性： content: " ";显示：块；位置：相对；填充顶部：100px；边距顶部：-100px；可见性：隐藏；指针事件：无；

【解决方案27】：

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

在您要设置锚点的位置创建一个空白跨度。

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

即使这些部分具有不同颜色的背景，此解决方案也可以工作！我在this link.找到了解决方案

【讨论】：

这不正是Guillaume Le Mière 和其他一些人在这个帖子中展示的方法吗？
它非常相似，但我认为它更容易理解，并且响应更详细，并带有更深入的外部来源链接。
这是相同的解决方案，但我可以轻松理解和遵循这个解决方案。其他人没有给我足够的信息。

【解决方案28】：

我创建了一个带有几个换行符的 div 并给出了 id，然后我将我想要显示的代码放在下面。然后，该链接会将您带到图像上方的空间，并且标题将不再妨碍您：

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

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

【讨论】：

实用，但有一个缺点 - 它仅适用于页面上的第一个标题。如果有更多标题，您将开始在文本中看到很大的空白，因为每个标题之前都有<br> 标签。

【解决方案29】：

使用了这个脚本

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top -140
    }, 1000);
});

【讨论】：

请尝试解释为什么您认为这个脚本可以解决问题

【解决方案30】：

我需要一些适用于入站链接、页面上的链接以及 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+ 中发现问题

【讨论】：