ページ遷移後にハッシュタグのある要素にスクロール移動させたい

Question

いつもお世話になっております。

下記ページにあるテキストリンクにハッシュタグ付きURLを設定しています。
https://www.rakuten.ne.jp/gold/aoyama/otoiawase.html
例えば「領収書の発行について」をクリックすると、
よくある質問ページ（https://www.rakuten.ne.jp/gold/aoyama/faq.html）の一部の項目にスクロール移動させたいのですが、
なかなかうまく作動してくれません。

恐らくscriptがあちこちにあるのが原因だと思いますが、
現状でどうにか解決したいです。

デベロッパーで見たときに下部にあるにあるscript
下記のように設定しています。
	$(window).on('load', function () {
		// URLのハッシュ（#）を取得
		var hash = window.location.hash;

		// ハッシュが存在し、対象の要素が存在する場合にスクロール移動
		if (hash && $(hash).length) {
			// スクロールの対象となる要素の位置を取得
			var targetOffset = $(hash).offset().top - 50;

			// スムーズなスクロール移動を実行
			$('html, body').animate({
				scrollTop: targetOffset
			}, 500);
		}
	});

ご教示いただけますと幸いです。
お手数ですが、よろしくお願いいたします。

Answer

ECマスターズの北原です。

>よくある質問ページ（https://www.rakuten.ne.jp/gold/aoyama/faq.html）の一部の項目にスクロール移動させたいのですが、なかなかうまく作動してくれません。

私の環境で動作したところ、
遷移後に該当の質問までスクロールしたので、
おそらく通信環境や読み込みのタイミングで、
スクロールが動作しない場合があるのかと存じます。

解決策としては、該当の要素が生成されるまで
setTimeoutなどの関数を使って待つ処理を加えることです。

DOMが生成されるまで待つ処理は
下記の記事をご参考いただければと思います。

https://zenn.dev/doma_itachi/articles/0289cc5b40bace