任意IDへのリンクの上にtwitter埋め込み型ツイートがある場合に表示がずれてしまう

前提・実現したいこと

wordpressでwebページを制作しています。
任意IDへのリンク(http://example.com/#target)を開いた際に
ページ内容をすべて読み込んだあとjQueryで該当場所までスクロールをさせたいです。
（もしjQueryではなく指定場所を表示させる方法があればそれでも可です）

発生している問題・エラーメッセージ

任意IDへのリンクを開いた際、
そのリンクの上部にTwitterの埋め込み
(iframeでのタイムライン表示、埋め込みウィジェットなどtwitter公式のもの)があると、
スクロール後に埋め込み部分が読み込まることがあり、その分表示が下にずれてしまいます。

たまにサイトが重く、ページが読み込まれる前に埋め込み部分が読み込まれている場合は
意図した場所にスクロールされるため、埋め込みツイートが原因ではないかと思いました。

とくに<twitterwidget>というタグで表示されるtwitter埋込み型ツイートに関しては、
開発者ツールでは表示が確認できますが、
ソース上は

<blockquote class="twitter-tweet" data-lang="ja">xxx... で表示されているため、要素を指定してそれを読み込んだあとにスクロールをさせる、ということが出来ないように感じます。（それも正しい認識かどうかがわかりませんが…）

試したこと

jQuery
1$(window).on('load', function() {
2		var hash = window.location.hash;
3		var position = $(hash).offset().top;
4		position = position;
5		function scroll(position){
6		  $('html, body').animate({
7		    scrollTop : position
8		  }, 100);
9		}
10		scroll(position);
11});

上記コードでページの画像等読み込みが終わったあとにスクロールをする、という点は実現できました。
このスクロールのあとにTwitter埋め込みが読み込まれた場合ずれてしまうように思います。

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

wordpress 4.9.5
jquery 1.12.4

twitter埋込み型ツイート
http://westplain.sakuraweb.com/translate/twitter/Documentation/Twitter-for-Websites/Embedded-Tweets.cgi

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

回答1件

ベストアンサー

これでどうでしょうか。

html
1<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
2
3<a class="twitter-timeline" href="https://twitter.com/Twitter?ref_src=twsrc%5Etfw">Tweets by Twitter</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
4
5<div id="hash">target</div>
6
7<script>
8
9function scroll(position){
10 	$('html, body').animate({
11    scrollTop : position
12  }, 100);
13}
14
15$("[src=\"https://platform.twitter.com/widgets.js\"]").on("load", function(){
16	twttr.ready(function(twttr){
17		twttr.events.bind("rendered", function(event){
18			var hash = window.location.hash;
19			var position = $(hash).offset().top;
20
21			scroll(position);
22		});
23	});
24});
25
26</script>