IE11でsetTimeout箇所が動作しません

前提・実現したいこと

jQueryを利用して以下のような要件のコードを用意しました。

別ページからのリンクで、ページ遷移後に任意のidまでスムーススクロールする。
ページを表示した後にスクロールさせるため、スクロールをsetTimeoutで200ミリ秒後に設定。
ウインドウサイズが1279px以下の場合はスクロール範囲に固定ヘッダー分を考慮させる。

いくつかのブラウザで試したところIE11のみスムーススクロール（animate箇所）が効かず、いきなり指定のid箇所で表示されます。

jQueryのバージョンは3.4.1を使用しておりますが、jQuery3系はIE9以上が対応ブラウザとなっているので問題はないかと思います。
ただ、jQueryやHTMLの記述が間違っていればその他のブラウザでも動作しないのでは？とも思うので、jQueryのバージョンになにか原因があるのか、それとも記述の方に問題があるのか確証が持てず。。。
なお、setTimeOutの箇所を省くと、IE11でもスムーススクロール（animate箇所）は機能しました。

恐れ入りますが、詳しい方にアドバイスをいただけましたら幸いです。
何卒よろしくお願いいたします。

該当のソースコード

jQuery
1$(function(){
2	var headerHeight = $('#header').outerHeight();
3	var urlHash = location.hash;
4	var target = $(urlHash);
5	
6	if (window.innerWidth <= 1279){
7		if(urlHash) {
8			$('html,body').stop().scrollTop(0);
9			setTimeout(function(){
10				var position = target.offset().top - headerHeight;
11				$('html,body').stop().animate({
12					scrollTop:position
13				}, 500);
14			}, 200);
15		}
16	} else if(window.innerWidth >= 1280){
17		if(urlHash) {
18			$('html,body').stop().scrollTop(0);
19			setTimeout(function(){
20				var position = target.offset().top;
21				$('html,body').stop().animate({
22					scrollTop:position
23				}, 500);
24			}, 200);
25		}
26	}
27});	
28

HTML
1<!doctype html>
2<html dir="ltr" lang="ja">
3<head>
4<!-- 中略　-->
5<script src="../js/jquery3.4.1.min.js"></script>
6<script src="../js/scroll.js"></script>
7</head>
8<body>
9<header>
10	<div id="header">
11<!-- 中略　-->
12	</div>
13</header>
14<div>		
15	<table id="aaa">
16		<!-- 中略　-->
17	</table>
18		<!-- 以下略　-->

試したこと

jQueryを1系と2系に変えてみましたが、ダメでした。

補足情報（FW/ツールのバージョンなど）

試した環境は、
Mac(10.14.5)/Chrome(75)/safari(12)
Windows(8.1)/IE(11)/Chrome(75)/firefox(67)
以上で、正常に動作しなかったのはIEのみです。

行動規範の内容に同意します

回答1件

ベストアンサー

フラグメント識別子のあるときにスクロールするのがロードよりもさらに遅いようなので、2フレームくらい待ったほうがいいかもしれません。

JavaScript
1        if(urlHash) {
2          setTimeout(function() {
3            $('html,body').stop().scrollTop(0);
4            // 略
5          }, 32);
6        }

時間は環境依存になるので、requestAnimationFrame を2つ重ねたほうがいいかも
https://developer.mozilla.org/ja/docs/Web/API/Window/requestAnimationFrame

投稿2019/07/16 05:37

x_x

総合スコア13749

atsushi_m

2019/07/16 12:06

x_x様ご回答いただきありがとうございます！また確認が遅くなりまして失礼いたしました。これから参照記事を拝見した上で試してみようと思いますが、少し時間がかかりそうなので、取り急ぎ確認の報告とお礼を申し上げます。結果についてはまた改めて報告させていただきます。

atsushi_m

2019/07/16 14:15

x_x様教えていただいた「requestAnimationFrame」で思っていたような動作にできました。ありがとうございます！初心者のため参照記事だけでは理解が及ばず、その他の記事もいろいろ参考にしながらだいたい「requestAnimationFrame」については理解が進んできたのですが、ひとつ新たに質問がございます。具体的にはこれまで「setTimeout」で書いていた箇所を「window.requestAnimationFrame」に置き換えることで動作自体は解決したのですが、引数に書いてくださった「32」の単位がわからず…。参照記事内に「このタイムスタンプは、ミリ秒単位の十進数ですが〜」と記載があるので、「32ミリ秒」ということでしょうか？また、ご回答の中に「2フレームくらい」と案内していただきましたが、恥ずかしながらこの点についてもわからなくて。。。これはどういった意味合いになりますでしょうか？追加の質問で恐縮ですが、ご教示いただけましたら幸いです。何卒よろしくお願いいたします。