別ページからの高さ読み込みによるアンカーリンクのずれ

Question

Worpressで制作しているページ（レスポンシブ）での
別ページからの高さ読み込みによるアンカーリンクのずれについてご教授ください。

▼▼▼Aページ
固定ヘッダー等はなく、単純に6つのsectionがあり、それぞれcource1〜6というidをふってあります。
各sectionは、下記の内容になります。
↓
![

▼▼▼Bページ
ページ内のバナーをクリックすると「Aページ」のアンカーリンクsection4に移動したい。
Wordpressなので、アンカーリンクは下記の形で貼っています。
https://◯◯◯.com/A/#cource4

---

この状態で、BページのバナーをクリックするとAページのsection4を表示するのですが、
レスポンシブ制作のため、ブラウザの横幅によって各スライドの幅＆高さが随時変わる（スライドはブラウザ横幅の50%にしたい）ので、その計算に追いつく前にアンカーリンク先に移動してしまうようで、表示位置がずれてしまいます。

そこで色々ネット検索をして、ページ全ての読み込みが完了してから
アンカーリンクを動かす、というスクリプトを見つけ動かしてみました。

<script language=JavaScript>
	$(window).on('load', function(){
	var ahash = location.hash;
	var gotoNum = $(ahash).offset().top;
	$('html,body').animate({ scrollTop: gotoNum }, 0 );
	return false;
	});
</script>

こちらで動作確認を行ったところ、MacとWindowsともに
Safariのみload関数が効かない？のかうまく動きません。（他のブラウザは全て思い通りの表示になりました）

挙動としては、いち早くアンカーリンク先に移動してしまうので、
その後、各sectionのスライド画像が読み込まれ、
最終的には全く違うsectionがその位置に表示されてしまう、という感じです。

何か解決策やヒントなどございましたらご教授いただけると幸いです。
宜しくお願いいたします。

Comments

[yoshinavi]

具体的にどのようにズレるのでしょうか？アンカー設定等提示されると良いかと思います。

Answer 1

safariに関してはpageshowというイベントに紐っけてはどうでしょうか？
http://www.webcreativepark.net/javascript/event/pageshow/

Comments

[watermusic]

ありがとうございます！
こちらでテストしてみます。