javascript - 防止 IE10 中的 location.hash "jumping"

Question

有没有办法防止窗口位置哈希导致文档在 IE10 中“跳转”？下面的代码适用于 Chrome 和 Firefox。

if (location.hash) {
  setTimeout(function() {
    window.scrollTo(0,0);
  }, 1);
}

请注意，我也用 jQuery 的 $(window) 尝试过此操作，但没有成功。

Answer 1

与劳伦会面后，我们确定:

• window.scrollTo(0,0)通过打开开发人员工具并运行命令，可以在 IE 10 中工作。所以我们知道代码是独立工作的，但我们还做错了其他事情，或者页面上有代码阻止页面转到顶部。
• 作为一个快速技巧，我们将时间间隔从 1 毫秒增加到 2000 毫秒，以查看是否存在竞争条件。这有效，但由于页面闪烁/跳转而不理想。我们将该值从 2000 毫秒降低到更低的值，以最大程度地减少闪烁影响。
• 仅当第一次从不同的路线进入页面时，页面才不会滚动到顶部，而不仅仅是重新加载页面......可能页面上的其他一些 JavaScript 导致了不同的逻辑路径。

想法:

• 由于 JavaScript 执行速度较慢，可能只发生在 IE10 中。其他浏览器解析和解释 JavaScript 的速度更快。
• 可以通过查询参数而不是 anchor 来删除滚动，但这会导致代码被重构并且 URL 路径不那么漂亮。即https://<url>?tab-name=TabNameToSelect
• 滚动可以通过服务器端或客户端路由删除，但需要更大的开发工作...路由可能具有类似 {controller}/{action}/{tab-id} 的模式或{controller}/{action}/{item-id}/{tab-id}

快速修复解决方案:

// quick and dirty franken'fix
if (location.hash) {
  setTimeout(function() {
    window.scrollTo(0,0);
  }, 250);   // increment interval to "prevent" race condition
}