jQuery ページ外アンカーリンクの挙動がおかしい（iPhoneのみ）

Question

前提・実現したいこと

iPhoneのみアンカーリンクの挙動がおかしいです。
idで指定した箇所までページ遷移はできますが、その後スクロールしようとすると、
アンカー位置に無理やり戻ろうとして、うまくスクロールができません。
ご教示の程、宜しくお願い致します。

該当のソースコード

$(window).on('load resize', function(){
	var url = $(location).attr('href');
	if(url.indexOf("#") != -1){
		var anchor = url.split("#");
		var target = $('#' + anchor[anchor.length - 1]);
		if(target.length){
			var pos = Math.floor(target.offset().top) - 170;
		}
		if (window.innerWidth < 767) {
			if(target.length){
				var pos = Math.floor(target.offset().top) - 70;
			}
		}
	}
	$("html, body").animate({scrollTop:pos}, 500);
});

Answer 1

iPhoneは、スクロールすると、
ステータスバーの高さが変化するため、
window.onresizeイベントが起動します。
なので、その度に中の処理である、
URLから取得したID付き要素へスクロールする処理が発生してしまいます。

window.onloadとwindow.onresizeで違う関数を使用するか、もしくは、
イベント別で処理を分けるように書くしかありません。

Comments

[rightbrain]

ご回答いただき、誠にありがとうございます。
そうだったんですね…！お恥ずかしながらそのようなイベントの存在自体を初めて知ることができました。
ご教示いただいた方法で試してみようと思います。
ありがとうございます！

[miyabi_pudding]

質問者さんが指定している、
$(window).on('load resize', function(){
と同じです。
これは、jQueryを使用し、
window.onloadとwindow.onresizeのイベントを同時に指定するという構文になります。

[miyabi_pudding]

jQueryは、あくまでJavaScriptを短く書けるようにしたもの、と覚えておきましょう。中身は結局JavaScriptが動いています。
そういうものを、ライブラリ、と言います。