やまでら くみこ のレシピ

短時間で簡単に作れる人気家庭料理を紹介。

ページ内リンクのジャンプ先がずれる原因と解決方法【HTML】

投稿日:

ページ内リンクのジャンプ先がずれてしまう原因と、その解決策について解説します。

別ページの特定の場所にリンクを貼る場合には、ハッシュ(#)で要素のIDを指定しますよね。
例えば、こういう感じで。

<a href="../sample.html#example">サンプル</a>

もちろん、これはHTMLの文法的には正解で、なんの間違いもありません。

でも、実は、これだけでは不十分なケースもあるんです。

例えば、レスポンシブデザインを採用しているケースです。

レスポンシブデザインの弊害

レスポンシブデザインのサイトでは、ウィンドウサイズに応じて画像サイズが動的に変更されます。

画像の幅は親要素と同じ、高さはそれに合わせて自動で調整するという指定の仕方が一般的です。

img{
  width:100%;
  height:auto;
}

このように指定しておけば、あとはブラウザがうまいこと表示してくれるので、とても便利なわけです。

でも、これには弊害もあって、ページを読み込んでみないと画像の高さが決まらないんです。
width:100%が何ピクセルなのか、それが決まらないと高さも決まりません。

そして、ここにページ内リンクのジャンプ先がずれてしまう原因があります。

ズレの原因

ブラウザがジャンプ先の位置を計算する段階では、画像の高さが決まっていません。
その段階では画像の高さは0。

そして、ジャンプした後に画像が読み込まれて、その画像の高さ分のズレが生じることになります。

これがズレの原因です。

ズレの解決方法

さて、ではどのようにズレをなくすか。

ページ内リンクのジャンプ先のズレを解消する方法は2つあります。

  • サイトをAMP化する
  • javascriptで対応する

AMP化による解決

AMP(Accelerated Mobile Pages)で画像を表示するときには、<img>ではなく、<amp-img>を使います。

<amp-img>の素晴らしいのは、レスポンシブであっても高さが0にはならないという点です。

ページ内リンクのジャンプ先の位置を計算する際にも、しっかりと画像の高さを確保してくれるんです。

もし、AMPを導入することが可能なら、これがいちばん良い選択肢だと思います。

javascriptで対応する

とは言っても、AMP化は技術的にもハードルが高いですし、制約も少なからず発生します。

そこで、次の手としては、javascriptによる対応です。

ページの読み込み完了後に、強引にスクロールさせてズレを解消します。

<script type="text/javascript">
window.onload = function() {
    if(window.location.hash==""){return;}
    document.getElementById(window.location.hash.slice(1)).scrollIntoView(true);
};
</script>

WordPressなら、functions.phpに次のコードを追記すると便利です。

add_action('wp_footer', function(){
    $code = <<< EOF
<script type="text/javascript">
window.onload = function() {
    if(window.location.hash==""){return;}
    document.getElementById(window.location.hash.slice(1)).scrollIntoView(true);
};
</script>
EOF
;
    echo $code;
});

以上、ページ内リンクのジャンプ先がずれる原因と解決方法でした。

おすすめ記事

分数の計算機ツール。分数のかけ算・割り算・足し算・引き算を簡単に。

素数判定プログラム。素数を見分けるためのフローチャートも紹介。

素因数分解の簡単計算アプリ!ツールなしで算出するやり方も解説。

最小公倍数の計算アプリ。手計算する場合の簡単な求め方も紹介。

最大公約数の計算機。サイト上で瞬時に計算!簡単な求め方も解説。

フランス語のアルファベットの簡単キーボード。一覧から文字を入力。

スペイン語のアルファベット入力キーボード。変換不要!一覧から文字を選択

ロシア語のアルファベット入力キーボード。変換不要!一覧から文字を選択

累乗・べき乗の計算機。指数が分数・小数・マイナスでもOK!

正三角形の面積・高さ・辺の長さの計算機。公式を使った求め方も紹介。

円の面積・直径・半径・円周の計算機。公式を使った求め方も紹介。

トルコ語のアルファベットの入力ツール。トルコ文字の簡単キーボード。

ギリシャ文字への変換を簡単に!見た目と読み方の一覧からギリシャ語を入力。

ページ内リンクのジャンプ先がずれる原因と解決方法【HTML】

平方根(ルート)の値を求める計算機。分数もOKな電卓サイト。

分数の計算機ツール。分数のかけ算・割り算・足し算・引き算を簡単に。

分数同士の計算をサイト上で簡単に行える、電卓アプリです。かけ算・割り算・足し算・引き算、どの計算方法にも対応しています。このツール…

素数判定プログラム。素数を見分けるためのフローチャートも紹介。

この素数チェッカーは、指定した整数が素数かどうかを簡単に判定できるアプリです。もし素数でない場合は、その整数の素因数を一覧表示しま…

素因数分解の簡単計算アプリ!ツールなしで算出するやり方も解説。

素因数分解をサイト上で簡単に行える、計算機アプリです。入力は15桁以下に抑えるのがおすすめです。入力した数字が大きいと、計算にかな…

最小公倍数の計算アプリ。手計算する場合の簡単な求め方も紹介。

最小公倍数を求めるための計算機アプリです。整数は、3つ以上入力することも可能です。入力する際には、それぞれの整数を空白や改行で区切…

最大公約数の計算機。サイト上で瞬時に計算!簡単な求め方も解説。

最大公約数を求めるための計算機アプリです。整数は、3つ以上入力することも可能です。入力する際には、それぞれの整数を空白や改行で区切…

フランス語のアルファベットの簡単キーボード。一覧から文字を入力。

フランス語のアルファベットを簡単に入力するためのオンラインアプリです。一覧表から文字を選択するだけなので、変換は不要。アクセント記…

スペイン語のアルファベット入力キーボード。変換不要!一覧から文字を選択

スペイン語のアルファベットを簡単に入力するためのオンラインアプリです。一覧表から文字を選択するだけなので、変換は不要。逆疑問符や逆…

ロシア語のアルファベット入力キーボード。変換不要!一覧から文字を選択

ロシア語のアルファベットを簡単に入力するためのオンラインアプリです。一覧表から文字を選択するだけなので、変換は不要。打ち方が分から…

累乗・べき乗の計算機。指数が分数・小数・マイナスでもOK!

累乗とべき乗(冪乗)を簡単に計算する電卓です。数aのn乗、anを算出します。二乗や三乗を計算するときなどに便利です。なお、この計算…

正三角形の面積・高さ・辺の長さの計算機。公式を使った求め方も紹介。

正三角形の面積・高さ・辺の長さを計算するツールです。

円の面積・直径・半径・円周の計算機。公式を使った求め方も紹介。

円の面積と円周の長さを計算するツールです。

トルコ語のアルファベットの入力ツール。トルコ文字の簡単キーボード。

トルコ語のアルファベットを入力するためのオンラインツールです。使い方は簡単で、トルコの文字を一覧から選択するだけでOK。キーボード…

ギリシャ文字への変換を簡単に!見た目と読み方の一覧からギリシャ語を入力。

ギリシャ文字を手軽に入力するためのオンラインツールです。入力したいギリシャ文字を一覧から選ぶだけなので、超簡単。キーボードで文字を…

ページ内リンクのジャンプ先がずれる原因と解決方法【HTML】

ページ内リンクのジャンプ先がずれてしまう原因と、その解決策について解説します。別ページの特定の場所にリンクを貼る場合には、ハッシュ…

平方根(ルート)の値を求める計算機。分数もOKな電卓サイト。

平方根(ルート)の計算機は、平方根の値をサイト上でカンタンに計算できる電卓です。整数だけでなく、小数や分数の平方根にも対応している…