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

Question

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

我正在使用的 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 与文档本身不同。 p>

如果您需要等待网络字体、图像、视频等外部内容，您应该使用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 的文档。