固定ページヘッダーがページ内アンカーと重なる

HTMLページに非スクロールヘッダーがあり、上部に固定され、高さが定義されている場合：

URLアンカー（#fragmentパーツ）を使用して、ブラウザーでページの特定のポイントまでスクロールする方法はありますが、JavaScriptを使用せずに固定要素の高さを尊重する方法はありますか？

http://foo.com/#bar

誤り（ただし、一般的な動作）：正しい：
+ --------------------------------- + + -------------- ------------------- +
| BAR /////////////////////ヘッダー| | ////////////////////////ヘッダー|
+ --------------------------------- + + -------------- ------------------- +
| これがテキストの残りの部分です。| バー|
| ... | | |
| ... | | これがテキストの残りの部分です。
| ... | | ... |
+ --------------------------------- + + -------------- ------------------- +

私も同じ問題を抱えていました。トップバーの高さをパディングトップ値としてアンカー要素にクラスを追加することで解決しました。

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

そして単にCSS：

.anchor { padding-top: 90px; }

新しいクラスを設定できない場合、または設定したくない場合は、CSSの疑似クラスにfixed-height ::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を呼び出すように、意志はありませんても、現在のChromeのターゲットが、指定されたCSSソリューションまたはJSソリューションでオフセット。

問題の詳細を説明するjQueryバグレポートもあります。

解決

これまでにChromeで実際に機能する唯一のオプションは、onDomReadyではなく遅延を伴うJavaScriptです。

// 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-margin-topプロパティ。現在、ChromeとOperaで実行されています（2019年4月）。また、Safari 11以降でもこれをサポートするはずですが、Safari 11では実行できませんでした。

コードペンの例

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>

最初のものはChromeでは機能せず、2つ目はFirefoxでは機能しないため、 MutttenXdとBadabamの両方のCSSソリューションを一緒に使用する必要があることがわかりました。

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

アンカーリンククラスをリンクに割り当てることにより、他のリンク（アコーディオンやタブコントロールなど）の動作には影響しません。

質問は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>

このコードでうまくいくはずです。ヘッダーバーの高さを45ピクセルに変更します。

編集：jQueryの使用がオプションの場合、オフセット値を設定してjQuery.localScrollを使用することもできました。offsetオプションは、jQuery.localScrollが構築されているjQuery.scrollToの一部です。デモはこちらから入手できます：http : //demos.flesler.com/jquery/scrollTo/（「オフセット」の下の2番目のウィンドウ）

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

これで、使用することができ、スクロールマージントップにある、かなり広く採用されています。

スクロールする要素に次のCSSを追加するだけです。

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