Javascript 在动态生成的页面上可靠地跳转到命名锚？

我有一个由客户端动态构建的网页。它生成几十个列表项，每个项都有自己的命名锚。页面的侧面有一个固定的目录（TOC），其中包含指向命名锚的超链接。这允许用户单击TOC条目并跳转到该项目

我遇到的问题是，在初始页面加载时，页面是动态生成的，因此无法使用浏览器的默认行为滚动到URL初始哈希中的项目。此外，当用户切换到另一本书时，页面将使用新内容和新的起始哈希完全重新生成。同样的问题：由于散列预先存在内容，因此它不会将自身与已在视图中的项放在一起

我几乎用JavaScript解决了这个问题，方法是等待渲染，然后在适当的元素上使用

scrollIntoView

方法跳转到散列

下一个问题是在调用

scrollIntoView

时样式表没有完全应用，因此项目的最终位置未知。我看到未设置样式的项目滚动到视图中，但一旦应用了样式，定位就会丢失。我设置了1秒

setTimeout

来延迟

scrollIntoView

调用。这种方法有效，但感觉很脆弱

---

当内容在散列后出现时，是否有可靠的技术可以跳转到命名锚？如果我知道CSS是什么时候完成的，那可能会有所帮助。或者，在页面高度稳定后触发事件（从而表明CSS样式已完成）可能会很有用。

如果您始终知道要设置焦点的元素的名称，则可以使用jQuery。您可以在页面加载后运行此操作：

$( "#targetElementGoesHere" ).focus();

---

编辑：要滚动到该位置，请签出

如果您始终知道要设置焦点的元素的名称，则可以使用jQuery。您可以在页面加载后运行此操作：

$( "#targetElementGoesHere" ).focus();

---

编辑：要滚动到那个，请查看

我想你需要的答案是这个人回答的

所以，像这样的事情

document.onload = function(){ 
    scrollIntoView...
}

---

我想你要的答案是这个人回答的

所以，像这样的事情

document.onload = function(){ 
    scrollIntoView...
}

---

我有一个类似的问题，尽管在我的例子中，只有目录和命名锚在onload处理程序中自动生成，而不是页面内容的其余部分。在生成锚之后，我通过向onload处理程序添加以下代码解决了初始哈希问题：

if (location.hash)
{
    var requested_hash = location.hash.slice(1);
    location.hash = '';
    location.hash = requested_hash;
}

---

我必须先将哈希值设置为“”，然后再将其设置回请求的名称以使浏览器响应。这似乎适用于我尝试的所有浏览器（Opera、Chrome、Edge、IE、FF）。

我遇到了类似的问题，尽管在我的例子中，只有目录和命名锚在onload处理程序中自动生成，而不是页面内容的其余部分。在生成锚之后，我通过向onload处理程序添加以下代码解决了初始哈希问题：

if (location.hash)
{
    var requested_hash = location.hash.slice(1);
    location.hash = '';
    location.hash = requested_hash;
}

---

我必须先将哈希值设置为“”，然后再将其设置回请求的名称以使浏览器响应。这似乎适用于我尝试的所有浏览器（Opera、Chrome、Edge、IE、FF）。

当你说“跳转到”时，你是说焦点吗。还有，“散列”是你希望关注的页面上的一个元素吗？如果是这样，它是否总是有相同的名称？内容超出了视口，因此应该显示在视口顶部的项目（根据URL中的标签）需要滚动到视图中。名称保持不变。我编辑了关于聚焦的答案，并链接到jquery.ScrollTo当你说“跳到”时，你是指聚焦吗。还有，“散列”是你希望关注的页面上的一个元素吗？如果是这样，它是否总是有相同的名称？内容超出了视口，因此应该显示在视口顶部的项目（根据URL中的标签）需要滚动到视图中。名称保持不变。我编辑了关于聚焦的答案，并添加了jquery.scrollToI链接。我相信

focus

只对输入元素有效。在任何情况下，我都尝试过使用它而不是

scrollIntoView

，现在它甚至在延迟的情况下也不起作用。它用于表单元素（、等）和链接（），因此您确实可以使用它来集中链接。另外，请查看我的编辑，以获取指向滚动解决方案的链接，谢谢您的帮助。我在没有jQuery插件的情况下使用了

scrollIntoView

。问题在于时机。该项目确实滚动到视图中，但CSS样式仍在进行，因此当样式完成时，页面的整体高度已显著降低。然后该项从视口中消失。是否将JavaScript包装在$（文档）中。就绪（函数（）{}我相信

focus

只对输入元素有效。在任何情况下，我都尝试过这样做，而不是

scrollIntoView

，现在它甚至在延迟的情况下也不起作用。它用于表单元素（，等等）和链接（），这样你就可以用它来聚焦你的链接了。另外，请查看我的编辑，找到指向滚动解决方案的链接，谢谢你的帮助。我在没有jQuery插件的情况下，

scrollIntoView

可以正常工作。问题是时间问题。项目确实可以滚动到视图中，但CSS样式仍在运行，因此在样式完成o页面的总高度已显著降低。然后该项会从视口中掉出来。是否将该JavaScript包装在$（document）.ready（function（）{}中我已经在

onload

事件中运行了所有JavaScript。在此之前，页面是完全空白的。所有内容都是通过JavaScript生成的。我会有效地执行您所说的操作，在生成内容后滚动到视图中。问题是我可以看到CSS样式没有跟上添加到页面中的内容。因此，我添加动态内容，滚动到给定的项目，它进入视图，然后片刻