URLのアンカー（ハッシュ）で処理を分ける — その多くは、もうJavaScriptが要らない

公開 2026-10-25 ／ 更新 2026-10-25 ／ 文：ランツ

先に結論

「URLの # で処理を分ける」という作業の大半は、いまCSSだけで書けます。 JavaScriptを書く前に、下の表を見てください。

手元のChrome 152で、CSSの3つが使えることを確認しました。

JSが要らなくなったもの

スムーススクロール

ページ内リンクをなめらかに動かすために、昔はJSでアニメーションを書いていました。 いまはCSS1行です。

html {
  scroll-behavior: smooth;
}

これだけで、<a href="#section"> のリンクも、 location.hash への代入も、なめらかに動きます。

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

固定ヘッダーで見出しが隠れる

これが一番よく踏む問題です。 画面上部に固定ヘッダーがあると、アンカーで飛んだ見出しがヘッダーの裏に隠れます。 昔はJSでスクロール位置を計算し直していました。

MDNは scroll-margin-top の用途として、まさにこれを挙げています。

高さ60pxの固定ヘッダーを置いたページで、実際に測りました。

書き方は1行です。飛び先の要素に付けます。

/* 飛び先になる見出しに付ける（リンク側ではない） */
h2, h3, [id] {
  scroll-margin-top: 80px;   /* ヘッダーの高さ + 余白 */
}

ヘッダーの高さが可変なら、カスタムプロパティにしておくと楽です。 JSでの位置計算と違って、画面幅が変わっても勝手に追従します。

表示の出し分け

「#tab-a ならAを出す、#tab-b ならBを出す」という切り替えも、 :target でCSSだけで書けます。

/* 既定では隠しておく */
#panel-a, #panel-b { display: none; }

/* URLのハッシュが自分を指しているときだけ出す */
#panel-a:target, #panel-b:target { display: block; }

<a href="#panel-a">Aを見る</a>
<a href="#panel-b">Bを見る</a>

<div id="panel-a">パネルA</div>
<div id="panel-b">パネルB</div>

4行目が :target の弱点です。 ハッシュが無い状態では何も選ばれないので、「最初はAを出しておく」が書けません。 既定で出したいものがあるなら、JSか <details> を検討してください。

それでもJSが要る場合

location.hash の値の形

location.hash は # を含みます。 ここを勘違いすると、比較がすべて外れます。実測した値です。

無いときは null ではなく空文字です。 # を外したいなら .slice(1) を使います。

// 「#」込みで比較する
if (location.hash === '#detail') { ... }

// 「#」を外して使う
const id = location.hash.slice(1);   // '' か 'detail'
if (!id) return;                     // 無いときは空文字

日本語アンカーで getElementById が失敗する

ここが実務で一番詰まります。 見出しのIDを日本語にしている場合、location.hash はエンコードされた文字列を返します。

IDが 日本語見出し（7文字）の要素に飛んだとき、実際に返ってきた値です。

そのまま要素を探すと、見つかりません。

// 日本語のIDでも引ける書き方
const raw = location.hash.slice(1);
if (!raw) return;

const id = decodeURIComponent(raw);
const el = document.getElementById(id);
if (el) el.scrollIntoView();

なお、document.getElementById('日本語見出し') のように 日本語を直接渡す分には問題なく引けます（実測で確認）。 問題は location.hash から取った値を使うときだけです。

変化を検知する

ハッシュが変わったことを知りたいなら hashchange です。 ページの読み込み時には発火しないので、初回は自分で呼びます。

function onHash() {
  const id = decodeURIComponent(location.hash.slice(1));
  // ここで処理を分ける
}

addEventListener('hashchange', onHash);
onHash();   // 初回は自分で1回呼ぶ

ハッシュを消す

処理が終わったあと、URLから # を消したいことがあります。 location.hash = '' だと、# だけが残ります。

2行目を使ってください。 replaceState なら履歴を増やさないので、戻るボタンが壊れません。

踏みやすい罠

最後の行は見落とされます。 アンカー付きのURLで直接開くと、スクロール位置を決めたあとに画像が読み込まれて高さが変わります。 画像に寸法を書いておけば、読み込み前から場所が確保されるので、ずれません。

AIに任せるときの注意

判定の目安です。出てきたコードが scrollTop のアニメーションや offsetTop の計算をしていたら、古い書き方です。 CSSで足りないか先に確認してください。

よくある質問

スムーススクロールにJSは要りますか

要りません。html { scroll-behavior: smooth; } の1行です（詳しく）。 Chrome 152で対応を確認しました。

固定ヘッダーで見出しが隠れます

飛び先の要素に scroll-margin-top を付けてください（表3）。 実測では、60pxのヘッダーに対して 80px を指定すると、見出しの上端が0px→80pxになりました。

location.hash に # は含まれますか

含まれます（表5）。 無いときは null ではなく空文字です。外すなら .slice(1) です。

日本語の見出しだけスクロールしません

location.hash がパーセントエンコードされた文字列を返しているためです（表6）。 実測では7文字の見出しが55文字になりました。 decodeURIComponent() を通してから getElementById() に渡してください。

:target で最初から1つ開いておけますか

できません。ハッシュが無い状態では、どれも選ばれません（表4）。 既定で出したいものがあるなら、JSか <details> を検討してください。

読み込み時に hashchange が走りません

仕様どおりです。初回は自分で1回呼んでください（詳しく）。

URLから # を消すには

history.replaceState(null, '', location.pathname + location.search) です（表8）。 location.hash = '' だと # が残り、履歴も増えます。

別ページから飛ぶと位置がずれます

画像の読み込みで高さが変わっています（表9）。 画像に width と height を書いて、読み込み前から場所を確保してください。

まとめ

• 大半はCSSで足りる。スムーススクロール・固定ヘッダー対策・表示の出し分けは、いまJSが要らない。
• 固定ヘッダーで隠れる問題は scroll-margin-top の1行。実測で見出しの上端が0px→80pxになった。
• MDNも「内容がヘッダーに隠れることを防ぎます」と用途を明記している。
• 表示の出し分けは :target。ただしハッシュが無い状態では何も選ばれない。
• location.hash には # が含まれる。無いときは空文字（null ではない）。
• 日本語のIDはパーセントエンコードされる。実測で7文字が55文字になった。
• そのまま getElementById() に渡すと見つからない。decodeURIComponent() が要る。
• 英数字のIDでテストしていると気づけない。日本語の見出しで試す。
• hashchange は読み込み時に発火しない。初回は自分で呼ぶ。
• # を消すなら replaceState。location.hash = '' だと # が残る。