jquery在页面加载后链接到div id - 但页面在动画后继续加载

Question

此任务的总体目标是动画滚动用户到页面上较低的某个div，具体取决于#hashName附加到url的任何内容。

我正在使用的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等在代码中，所以我可以在WordPress中使用它。

此代码正常工作。我的问题是，此脚本触发，而页面正在加载。该页面不断加载。结果，页面焦点回到页面顶部！

我正在考虑在$(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文档看看。