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(){});内的哈希代码中，但这似乎不起作用。注意我现有的动画回调试图让用户专注 - 但这并不坚持。页面仍然加载。 Page需要花费很多时间来加载，所以我正在反对这一点。

所以在这一点上，我碰到了一堵砖墙。我正在通过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的文档。

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

1 个答案: