ページの遷移でアンカーリンクが効かないときの対処法

WordPressで制作していたサイトで、ページを遷移したときに通常のアンカーリンクが効かないときがあった。

あるページAからあるページBに遷移した際に、ページAで押下したアンカーリンクがページBのアンカー先の位置になぜか正常に飛ばない。

面倒くさいけど放置するわけにも行かないので、とりあえず対処した。

 

原因としては、$(window).load()とかでJavaScriptとかjQueryのライブラリを初期化してあげている際に、アンカーリンクがライブラリの初期化前のアンカー位置に遷移してしまうことが原因のひとつ。

あとは、position: fixed;で固定化しているヘッダーに、スクロール量でどうたらとかのスクリプト制御をかけていたりして、アンカー先の位置が読み込み中と読み込み後でズレてしまっているとか。

 

とはいえ、これらを全てカットすることなんか現状のサイト制作上でありえないもの。

ページ全体のロードとか操作、エフェクトとか諸々の制御の兼合い上、どうしてもそういった構成にしなければならないということもある。

 

そんな場合は、このようにして再度アンカー先へ飛ばしてあげるのが有効だったりする。

$(window).load(function(){
	var lochref = window.location.href;
	if ( lochref.indexOf('#') > -1 ) {
		var anchor = lochref.slice( lochref.indexOf('#') );
		window.setTimeout(function(){
			$('body, html').animate({ scrollTop: $(anchor).offset().top }, 1);
		}, 1);
	}
});

 

ロード終了後に、setTimeout()でロードからの時間を僅かにずらす。(他の$(window).load()でライブラリの初期化を行っている際の対策。)

で、locationで取得できるURLよりスライスしたアンカーリンクを元に、jQueryのanimate({scrollTop: xxx}, 1)で所定のアンカー先に再ジャンプをかける。

 

本来であればスクリプト読み込みやライブラリの初期化を複雑に行わない構成にするのが一番良いんだろうけどね・・・(´・ω・`)

まぁ、いざそういった構成となってしまったときの駆け込み的な対処法。

カテゴリ

この記事のコメント

  1. 初めてコメントします。JavaScriptはおろか、WordPressもイマイチわかっていない初心者です。
    知人に頼まれて、OnePressというテーマを使ってサイトを作ろうとしたところ、似たようなエラーに見舞われトップページのメインナビからのみ、別ページのアンカーポイントにリンクが飛ばなくなってしまいました。(その他のリンクは全て動くのですが)
    JavaScriptが原因であることは分かったので、こちらのサイトに書いてある解決法を試したいのですが、例文をそのままコピーしてfunctions.phpに入れても、エラーで読み込まれません。
    すごく初歩的な質問でも恐縮なのですが、もし可能でしたら、functions.phpへの書き込み方を教えていただけないでしょうか。
    厚かましいお願いですが、よろしくお願い申し上げます。

    1. コメントいただきありがとうございます。
      また、非常に亀レスとなってしまい申し訳ありません。

      コメントいただいた内容につきまして、functions.phpに組み込む場合、

      function user_head_scripts() {
      $string = < <
      (function($){
      // スクリプトの記述 ここから
      $(window).load(function(){
      ~~~~
      });
      // スクリプトの記述 ここまで
      })(jQuery);

      EOT;
      echo $string;
      }
      add_action( ‘wp_head’, ‘user_head_scripts’ );

      やり方は色々あるとは思いますが、たぶんこのようになるかと思います。
      wp_headにフックさせてuser_head_scripts関数を単純に呼び出す形です。

      関数のコンフリクトと関数内のヒアドキュメントの形に注意して適宜組み込んでみてくださいね!

  2. ご丁寧な解説ありがとうございます!!
    こちらこそお礼が遅くなってしまい申し訳有りません。
    頑張ってみます!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です