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)で所定のアンカー先に再ジャンプをかける。

 

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

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