Question

我有两个页面：index.html和features.html。 index.html中的按钮链接到features.html页面中的特定div，如下所示：

<a href="features.html#category1">...</a>

问题出现在哪里：features.html中的所有内容都是通过JSON文件加载的jQuery，所有这些加载都是在$(document).ready()函数调用中完成的。即使我上面链接的那个div也是通过JavaScript创建的。因此，出于某种原因，单击index.html中的那些按钮总是让我位于features.html页面的顶部。现在我不确定为什么会发生这种情况，但我最好的猜测是，因为只有在页面中的所有HTML加载完毕后才创建div，所以链接在此之前不知道该去哪里。

所以为了克服这个问题，我调整了我的JavaScript来说：

$(document).ready(function () {
    //does all JSON parsing and creation of divs and other elements
    loadAll();

    //scroll to appropriate div
    var id = getAnchor();
    scrollToDiv(id);
});

function scrollToDiv(id) {
   window.scrollTo(0, document.getElementById(id).offsetTop); 
}

function getAnchor() {  
    var currUrl = document.URL;
    var parts   = currUrl.split('#');

    return (parts.length > 1) ? parts[1] : null;
}

所有JSON处理和创建这些div都发生在loadAll（）函数中（我已经验证它可以正常工作）。并且最终存在id为“id”的div（在调试时在Chrome的“元素”中进行检查）。

但问题在于：document.getElementById（id）返回null。这意味着在我进行scrollToDiv（）调用时尚未创建div。但这怎么可能呢？所有加载都应该在loadAll（）函数中完成！ Chrome中的调试显示了同样的事情。

怎么办？

谢谢！

Answer 1

在代码运行时，似乎仍然通过AJAX调用加载内容（因此getElement返回null）。

我建议在调用getAnchor和scrollToDiv的请求中使用ajaxComplete之类的回调，然后确保内容在那里。

Answer 2

您尚未提供loadAll（）的源代码，但您提到您通过AJAX加载内容，这可能是问题所在。请记住，在Javascript中加载AJAX资源是异步，这意味着在调用运行时期间无法完成$ .post（），$。get（），$ .ajax（）或XHR操作，但稍后一旦浏览器收到资源。有趣的事实：除非在XMLHTTPRequest上使用同步选项，否则AJAX调用通常不可能在流程继续超出起始点（从中启动请求的代码点）之前完成，这是一件坏事无论如何要在大多数情况下做。

你应该做的是将用于滚动到锚点的逻辑移动到一个函数中，然后在所有AJAX请求返回并且所有内容都已设置之后应该调用该函数。如果您需要请求多个资源，则可以保留一个引用计数器，并在考虑所有资源后触发锚点滚动功能。

链接到div失败

2 个答案: