ページロード後にdiv idにjqueryをリンクしますが、アニメーション後にページが読み込まれ続けます

Question

このタスクの全体的な目標は、#hashNameがURLに追加されたものに応じてページの下の特定のdivにユーザーをスクロールさせることです。

私が扱っているhtmlには正しいdiv IDが追加されていないため、ドキュメント上でjavascriptを使用して追加しています。 div idが追加されると、渡されたハッシュを判別し、ユーザーをハッシュに渡すスクリプトが作成されます。この次のコードは動作します：

jQuery(document).ready(function($){ 
    //append new div id to current FAQ class 
    document.querySelector('.press-24_tab').id = 'faq'; 

    //now that we have correct div id, animate user to this div 
     var target = window.location.hash; 

     $('html, body').animate({scrollTop: $(window.location.hash).offset().top}, 'slow', function() { 
      //in animate callback, attempt to keep user focused here 
      $('#faq').focus(); 
     }); 
}); 

私はワードプレスでこれを使用することができますので、私はコード内などjQueryを呼び出しています。

このコードは正常に動作します。私の問題は、このスクリプトは、のページがロードされていることです。そしてページは読み込みを続けます。その結果、ページフォーカスはページの先頭に戻ります！

私は$(window).on('load', function(){});のハッシュコードにアニメーションをラップすることを考えていましたが、これはうまくいかないようです。ユーザーに焦点を当て続けるために私の既存のアニメーションコールバックに注意してください - しかし、これは固執していません。ページはまだ読み込まれます。ページにはロード時間がかかりすぎるので、私はこれに対して戦っています。

この時点で、私はレンガの壁に当たっています。私はjavascriptとjQueryの私より賢い人たちに私がここで何をしなければならないか見るために手を差し伸べています。どんな助けでも大歓迎です。

Answer 1

jquery(document).ready()はすぐにDOMは、物事のルックスで期待通りDOMは、文書自体と同じものではありませんように、これは実際に働いている準備ができていると発生します。

あなたがwindow.load()イベント

jquery(window).load(function() { 
    //append new div id to current FAQ class 
    document.querySelector('.press-24_tab').id = 'faq'; 

    //now that we have correct div id, animate user to this div 
    var target = window.location.hash; 

    $('html, body').animate({ 
    scrollTop: $(window.location.hash).offset().top 
    }, 'slow', function() { 
    //in animate callback, attempt to keep user focused here 
    $('#faq').focus(); 
    }); 
}); 

を使用する必要があり、ウェブフォント、画像、動画などのような外部コンテンツを待つ必要がある場合

はDOM hereのドキュメントを通して見てください。