frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

要素の増減でページ遷移のアンカーリンクの位置がずれる

スポンサードリンク


スポンサードリンク


アンカーリンクとはリンク先urlを例えば../index.html#anchorとしておくとクリックした時、id="anchor"とidを振った要素にスクロール位置が合うようになります。
またそれは同一ページでも別ページでもいけるんですね。

<a href="../index.html#anchor">アンカーリンク</a>
<h2 id="anchor">見出し</h2>

上記のようにすれば見出しのところまでジャンプします。

しかし、こちらタイトルの通り落とし穴があります。

どういった場合アンカーリンクがずれるかというと、要素の増減をJavaScriptで操作した時です。

時間軸で説明するとこうです。

1.アンカーリンクをクリック

2.別ページのhtmlを読み込む

3.アンカーリンクが発動してスクロール位置を合わせる

4.Jsが発動して要素の増減を操作したため、それより下の要素にスクロール位置を合わせようとした場合、位置がずれる


自分の場合4はカルーセルでした。カルーセルは動き的に3枚の画像を縦に並べてその後JSで横並びにするためその差分がずれました。

ヘッダー固定などでもこの現象は起きるようです。

対応策

JSの時点でずれるためその後のJSで調整しました。

  $(window).on('load', function() {
    var hash = window.location.hash;
    var position = $(hash).offset().top;
    function scroll(position){
      $('html, body').animate({
        scrollTop : position
      }, 100);
    }
    scroll(position);
  });

window.location.hashでurlの#~の部分が取得できます。
多少ずれてから位置が戻る動きにはなってしまいますが、現象も限定的ではあるのでさほど問題ではないかと思います。

またif文でTOPだけなど影響範囲を検討することも大事かと思います。