ページ内のアンカー位置がずれる

cocowa/service/index.html

ページ内リンクがズレる原因【Table of Contents Plus 】

HTMLでページ内リンクがずれる原因を解消する方法を現役エンジニアが解説【初心者向け】

ページ内リンクがずれる例

アンカーをつけることで適宜閲覧したい箇所へ移動できるものの、ジャンプ先の位置がずれてしまうケースがあります。

原因の多くは、ヘッダー位置を画面上部に固定しているためです。

ジャンプ先のセクションタイトルなどの要素の上に固定ヘッダーが重なって表示されてしまうため、表示がずれているように見えてしまうわけです。

ページ内リンクがずれる原因を解消する方法

では、固定ヘッダーの際の表示ずれを回避するための方法を紹介します。

CSSでアンカーとなるセクションタイトルに対して、ヘッダーの高さ分のpadding-topと、ヘッダーの高さ分のネガティブマージンをmargin-topに設定することで、ページ内リンクのジャンプ先を上にずらせます。

以下の例では、CSSに下記の記述を付け加えています。

.section h2 {
    padding-top: 60px;
    margin-top:-60px;
}

---

ここwaのご相談ページで実装中

/service/index.html

    <div class=" col-lg-6 mb-5">
    <section class="item-section">      
    <div class="itemBox">
    <h2 id="anchor-counseling" class="col-12 text-center  mb-1 boxTitle">カウンセリング</h2>       

    <div class="row">
    <div class="col-xl-4 mb-3">
     <img src="../image/service/item3.jpg" class="img-fluid mx-auto" alt=""/>
    </div>
    <div class="col-xl-8  ">
     説明説明説明説明説明
    </div>
    </div>    
    </div>
    </section>  
    </div>

///////////

<li><a href="../service/index.html#anchor-counseling">カウンセリングについて</a></li>

////////////////////

.serviceContainer .item-section h2 {
    padding-top: 200px;
    margin-top:-200px;
}

入れる要素にマージントップやパディングトップがそもそも初めから設定していると余計なスペースを作ってしまうので変な時はそのパディングなどを削除する