固定的页眉与页内锚重叠

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

有没有一种方法可以使用URL锚点（该#fragment部分）使浏览器滚动到页面中的某个点，但是在没有JavaScript的帮助下仍然可以尊重固定元素的高度？

http://foo.com/#bar

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

我有同样的问题。我通过将一个类添加到锚元素（顶部栏高度为padding-top值）来解决此问题。

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

然后简单的CSS：

.anchor { padding-top: 90px; }

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

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

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

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

我使用这种方法：

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

官方采用的答案：

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

学分

合并

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

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

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

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

如果您不喜欢使用目标选择器，也可以按照以下方式进行操作：

.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解决方案来解决此问题，但是如果您没有其他背景色，则此解决方案是最好的。

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

随着CSS Scroll Snap规范的出现，使用scroll-margin-topproperty 很容易实现。目前在Chrome和Opera上运行（2019年4月）。Safari 11+也应支持此功能，但我无法在Safari 11上运行它。可能我们必须等待其他人在那里修复它。

Codepen示例

body {
  padding: 0;
  margin: 0;
}

h1,
p {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
h1 {
  scroll-margin-top: 6rem; /* One line solution. :-) */
}
.header {
  position: sticky;
  top: 0;
  background-color: red;
  text-align: center;
  padding: 1rem;
}
.header .scroll {
  display: block;
  color: white;
  margin-bottom: 0.5rem;
}
.header .browsers {
  color: black;
  font-size: 0.8em;
}

<header class="header">
  <a class="scroll" href="#heading">Scroll to heading</a>
  <span class="browsers" >Chrome 69+, Opera 56+ and Safari 11+ only</span>
</header>
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<h1 id="heading">What is Lorem Ipsum?</h1>
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pulvinar eleifend dolor, in cursus augue interdum quis. Morbi volutpat pulvinar nisl et condimentum. Quisque elit lacus, egestas non ante sit amet, hendrerit commodo dui. Nunc ac sagittis dolor. Proin iaculis ante non est pharetra, et ullamcorper nisl accumsan. Aenean quis leo vel sapien eleifend aliquam. Pellentesque finibus dui ex, blandit tristique risus vestibulum vitae. Nam a quam ac turpis porta eleifend. Sed at hendrerit risus, ac efficitur ante. Aenean pretium justo feugiat condimentum consectetur. Etiam mattis urna id porta hendrerit.
</p>
<p>
Mauris venenatis quam sed egestas auctor. Fusce lacus eros, condimentum nec quam vel, malesuada gravida libero. Praesent vel sollicitudin justo. Donec mattis nisl id mauris scelerisque, quis placerat lectus scelerisque. Ut id justo a magna mattis luctus. Suspendisse massa est, pretium vel suscipit sit amet, iaculis at mi. Aenean vulputate ipsum non consectetur sodales. Proin aliquet erat nec mi eleifend, eu dapibus enim ultrices. Sed fringilla tortor ac rhoncus consectetur. Aliquam aliquam orci ultrices tortor bibendum facilisis.
</p>
<p>
Donec ultrices diam quam, non tincidunt purus scelerisque aliquam. Nam pretium interdum lacinia. Donec sit amet diam odio. Donec eleifend nibh ut arcu dictum, in vulputate magna malesuada. Nam id dignissim tortor. Suspendisse commodo, nunc sit amet blandit laoreet, turpis nibh rhoncus mi, et finibus nisi diam sed erat. Vivamus diam arcu, placerat in ultrices eu, porta ut tellus. Aliquam vel nisi nisi.
</p>
<p>
Integer ornare finibus sem, eget vulputate lacus ultrices ac. Vivamus aliquam arcu sit amet urna facilisis consectetur. Sed molestie dolor et tortor elementum, nec bibendum tortor cursus. Nulla ipsum nulla, luctus nec fringilla id, sagittis et sem. Etiam at dolor in libero pharetra consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse quis turpis non diam mattis varius. Praesent at gravida mi. Etiam suscipit blandit dolor, nec convallis lectus mattis vitae. Mauris placerat erat ipsum, vitae interdum mauris consequat quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Nunc efficitur scelerisque elit. Integer ac massa ipsum. Cras volutpat nulla purus, quis molestie dolor iaculis eget. Maecenas ut ex nulla. Pellentesque sem augue, ornare ut arcu eu, porttitor consectetur orci. Aenean iaculis blandit quam, in efficitur justo sodales auctor. Vivamus dignissim pellentesque risus eget consequat. Pellentesque sit amet nisi in urna convallis egestas vitae nec mauris. 
</p>

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

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

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

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

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

刚刚发现了另一个纯粹的CSS解决方案，对我来说就像一个迷住了！

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

在此网站上找到！

您可以尝试以下方法：

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

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

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

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

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

这个对我有用：

HTML锚点链接：

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

HTML锚点：

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

CSS：

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

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

我在这里和其他地方的许多答案都遇到了很多麻烦，因为我标记为书签的锚点是FAQ页面中的节标题，因此抵消标题无济于事，因为其余内容只会保留在原处。所以我认为我会发布。

我最终要做的是将一些解决方案组合在一起：

1. CSS：

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

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

2. 书签链接HTML：

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

3. 带有书签的内容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元素不仅被隐藏，而且实际上已折叠并且不会填充您的内容。

对于这种解决方案，我感到不以为然，因为它来自大量不同的资源，但是在我的情况下，它最适合我。

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

我对上面列出的答案没有任何运气，最终使用了效果很好的解决方案...

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

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

即使这些部分具有不同的彩色背景，该解决方案也将有效！我在此链接中找到了解决方案。

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

我发现我不得不使用这两种 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>
...

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

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

使用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;
});

通过将anchor-link类分配给链接，其他链接（例如手风琴或选项卡控件）的行为不会受到影响。

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

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

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

这段代码可以解决问题。换掉45px，以保持标题栏的高度。

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

这是将在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) {

    });
}

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

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

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

.section-marker {

    position: absolute;
    top: -300px;
}

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

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

var offset = 90;

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

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

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

当然，您可以更改换行的数量以适合您的需求。这对我来说非常理想，尽管不确定是否有任何问题，但我仍在学习HTML。

使用了这个脚本

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

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

我认为这种方法更有用：

<h2 id="bar" title="Bar">Bar</h2>

[id]:target {
    display: block;
    position: relative;
    top: -120px;
    visibility: hidden;
}

[id]:target::before {
    content: attr(title);
    top: 120px;
    position: relative;
    visibility: visible;
}

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

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

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