検索やAI利用でもなかなか解決できないため、投稿させていただきます。

「アンカーリンクのジャンプ位置を調整」したいです。

 

SWELLで固定ヘッダーを作成し全てのページで利用しています。

デフォルト機能での、カスタマイズ＞ヘッダー＞追従を使用せずに設定しました。

 

この状態で目次から各見出しへ飛ぶと、見出しがヘッダーに被ってしまいます。

アンカーリンクの位置調整として簡単な方法で以下のコードで調整できるとの記事を見ました。

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

このコードはSWELLでサンプルサイトを作っても機能しませんでした。

 

この他にJavaScriptでの調整を検討しましたが、どう設定しても目次から飛ぶと、見出し上に余白を作ることができません。

JavaScriptはデベロッパーツールで機能しているのを確認しています。

 

その他試したことは以下です。

・目次をプラグイン（RTOC,TOCP）にしてCSS、JavaScriptをためす

・SWELLのスムーススクロールを停止してCSS、JavaScriptをためす

・CSSでhtml以外にh2などの見出し[id]、.post_content h2も一通りためす

・CSSで!importantで優先させる

・JavaScriptでヘッダー読み込みを80pxに固定して実装

・scroll-margin-topを使用

・サブドメインでサイト作成しテスト環境（プラグインなし、カスタマイズ設定最小限）ためす

・SWELLのヘッダー追従を有効にして、自作ヘッダー非表示でためす

 

SWELLのtoc.phpも調べていたらPartsの中にあると見かけましたが、見つけることができませんでした。

見出しを自作すると隠れてしまうことが多いです。

 

Cocoonなどの別テーマだとscroll-padding-topが効きます。

SWELLでの目次アンカーリンクオフセットのコントロールについて、なにか対策があれば教えていただけるとありがたいです。

分かりづらくて申し訳ありませんが、ご教授いただけるありがたいです。