SmartAnchor 紹介 & 動作デモ
右の UI で ON/OFF や offset を変えて挙動を比較できます。
SmartAnchorとは
固定ヘッダ（position: fixed / sticky）が原因で発生するアンカーリンクのズレを、
既存サイトに後付けで一括解決する軽量スクリプトです。
なぜ問題が起きるのか（fixed header 問題）
ブラウザ標準の #anchor ジャンプは「対象要素の上端を viewport 上端に合わせる」動作です。
固定ヘッダがあると viewport 上端が覆われるため、見出しが隠れます。
ON/OFF UI（使い方）
- 右の Mode を OFF にする
- 目次リンクをクリックして「隠れる」問題を確認
- Mode を ON に戻して補正を確認
- offset をサイトのヘッダ高さに合わせる
導入方法（初心者向け）
<script>
window.SMARTANCHOR_CONFIG = { offset: 72, autoInit: true };
</script>
<script src="/assets/js/smartanchor.js" defer></script>
設定一覧（制作会社向け）
| option | type | 説明 |
|---|---|---|
| offset | number | 固定ヘッダの高さ |
| animate | boolean | スクロールアニメ |
| duration | number | アニメ時間（ms） |
| easing | string | linear / easeOut / easeInOut |
| updateHash | boolean | URLハッシュ更新 |
| historyMode | string | push / replace |
| focus | boolean | a11y focus |
CSP・広告・設定による注意点
CSP
外部JSを禁止している場合、smartanchor.js 自体が読み込めません。推奨は自サイト配信（'self'）です。
広告ブロッカー
CDN配信のJSがブロックされることがあります。自サイト配信が安全です。
WordPress最適化/キャッシュ
結合や遅延で実行順が変わると設定が効かないことがあります。smartanchor.js を除外するのが安全です。
動かない時のチェック
- 1 smartanchor.js のパスが正しいか
- 2 SMARTANCHOR_CONFIG が先に定義されているか
- 3 offset が実ヘッダ高さと合っているか
- 4 最適化/キャッシュで順序が変わっていないか
制作：門王（依頼受付）
SmartAnchor は 門王（monou.jp） が制作しています。 既存サイト向けの軽量スクリプト開発や、WordPress/静的サイトの改善などのご依頼を受け付けています。