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

Question

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

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

我几乎用 JavaScript 解决了这个问题，方法是等待渲染，然后使用scrollIntoView适当元素上的方法跳转到哈希。

下一个问题是样式表在调用时尚未完全应用scrollIntoView，因此项目的最终位置未知。我看到未样式化的项目滚动到视图中，但是一旦应用样式，定位就会丢失。我设置了 1 秒setTimeout来延迟scrollIntoView通话。这有效，但感觉很脆弱。

当内容在哈希就位后出现时，是否有可靠的技术可以跳转到指定锚点？如果我知道 CSS 何时完成样式化内容可能会有所帮助。或者，一旦页面高度稳定（从而标志着 CSS 样式的最终确定），触发事件可能会很有用。

Answer 1

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

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

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