aタグなどのクリックイベントとページ内遷移の実行順番

aタグのhref属性に#から始まるページ内リンクを指定した場合、該当箇所が「display: none;」やアコーディオンなどで非表示なっている場合、アンカーポイントが認識されず遷移されない状況になります。

解決策としてjavascriptのクリックイベントを用いて遷移の前に表示する処理を行えば解決します。

クリックイベントとページ内遷移の実行順

同じページ内でのページ内遷移

  1. aタグなどのクリックイベント発生
  2. javascriptのコードの実行
  3. ブラウザ側のページ内遷移の実行

上記のようにページ内遷移は一番最後の処理となるので、javascriptで非表示から表示（アコーディオンなオープン）してあげるときちんと、アンカーポイントに遷移してくれます。

他ページ（他サイト）からのページ内遷移

  1. HTML読み込み始め
  2. CSS読み込み
  3. javascriptのコードの実行
  4. ブラウザ側のページ内遷移の実行

CSSとhead内、JSはbody閉じタグ直前(footerより後)を前提としています。これはCSSとJSは記述順で実行順番が前後するからです。
同じページ内と同様、遷移の実行は一番最後になります。

サンプルコード

Javascript

$(".page_ankerlink").on("click", function () {
	var $target_id = $(this).attr("href");
	//親要素のid取得
	var $target_sec_id = '#' + $($target_id).parent().attr("id");
	//表示処理パターン その1
	$($target_sec_id).css('display','block');
	//表示処理パターン その2 
	$($target_sec_id).addClass('display_block');

アンカーポイントはアコーディオンなどの親要素に含まれることが多いので、今回は親要素の取得をしています。
表示させるためにはjavascriptで直接表示させるか、表示用のクラスを定義して付与するパターンがあります。

HTML

<a href="#page_ankerlink">ページ内リンク</a>
<div class="display_none" id="target_sec"><!-- 親要素が非表示-->
<p id="page_ankerlink">ここにページ内遷移したい</p>
</div>

まとめ

実行順を把握することによって、ページ内からであっても外部からでも意図通りに変更可能です。

Related articles