動的に生成されたページ上で名前付きアンカーに確実にジャンプしますか？

Question

私は、クライアントによって動的に構築されたWebページを持っています。これは、それぞれ独自の名前付きアンカーで数十のリスト項目を生成します。ページの側面には、指定されたアンカーを指すハイパーリンク付きの固定目次（TOC）があります。これにより、ユーザは、目次をクリックして項目にジャンプすることができる。

私が遭遇している問題は、初期ページの読み込み時にページが動的に生成されるため、ブラウザのデフォルトの動作を使用してURLの最初のハッシュの項目にスクロールできないことです。さらに、ユーザーが別のブックに切り替えると、ページは新しいコンテンツと新しい開始ハッシュで完全に再生成されます。同じ問題：ハッシュはコンテンツを先行しているので、すでに表示されているアイテムには位置しません。

レンダリングを待ってから適切な要素のscrollIntoViewメソッドを使用してハッシュにジャンプすることで、これをJavaScriptでほぼ解決しました。

次の問題は、scrollIntoViewが呼び出された時点でスタイルシートが完全に適用されないため、アイテムの最終的な位置が不明であることです。私は見えないアイテムのスクロールを見ていますが、スタイリングが適用されると、位置が失われます。 scrollIntoViewコールを遅らせるために1秒間setTimeoutを置いています。これは機能しますが、壊れやすいと感じます。

ハッシュが配置された後にコンテンツが来たときに、名前付きアンカーにジャンプする信頼できる手法はありますか？ CSSがいつスタッフィングのコンテンツを手伝ったのか分かっていたらあるいは、ページの高さが安定した後にイベントをトリガすると便利です（CSSスタイリングの終了を通知する）。

Answer 1

フォーカスを設定する要素の名前がわかっている場合は、jQueryを使用できます。あなたのページが読み込まれた後にこれを実行することができます。

$("#targetElementGoesHere").focus(); 

編集を：それまでスクロールするには、https://github.com/flesler/jquery.scrollTo

Answer 2

私はあなたが必要な答えはこの男で答えたと思うチェックアウト...

How to wait until a web page is loaded with javascript?

ので、このような何か...

document.onload = function(){ 
    scrollIntoView... 
} 

Answer 3

同じような問題がありましたが、私のケースでは目次と名前付きアンカーのみがonloadハンドラで自動生成されました。残りのページコンテンツではありません。私はアンカーを生成した後、私のonloadハンドラに次のコードを追加することにより、初期のハッシュ問題を解決：

if (location.hash) 
{ 
    var requested_hash = location.hash.slice(1); 
    location.hash = ''; 
    location.hash = requested_hash; 
} 

私は、ブラウザの応答を作るために要求された名前に戻し、それを設定する前に、「」にハッシュを設定する必要がありました。これは私が試したすべてのブラウザ（Opera、Chrome、Edge、IE、FF）で動作するように見えました。