javascript - JavaScript中如何判断页面是否跳转到了 anchor (#)？

Question

我有一些可以出现在许多不同页面上的 JavaScript。有时，这些页面是通过包含 anchor 引用(例如#comment-100)的 URL 访问的。在那些情况下，我希望 JavaScript 延迟执行，直到窗口跳转之后。现在我只是在使用延迟，但这很老套，显然并非在所有情况下都有效。我似乎找不到与窗口“跳转”相对应的任何类型的 DOM 事件。

除了简单的延迟之外，我想出的唯一解决方案是让 JS 在 URL 中寻找 anchor ，如果找到了 anchor ，则观察 scrollTop 中的变化。但这似乎有问题，而且我不能 100% 确定我的脚本总是会在滚动发生之前被触发，因此只有在用户手动滚动页面时它才会运行。无论如何，我不太喜欢这个解决方案，更喜欢更多事件驱动的东西。有什么建议吗？

编辑澄清:

我不是要检测散列更改。举个例子:

1. 页面 index.php 包含指向 post.php#comment-1
的链接
2. 用户点击链接到 post.php#comment-1
3. post.php#comment-1 加载
4. $(document).ready 触发
5. 不久之后，浏览器向下滚动到 #comment-1

我正在尝试可靠地检测第 5 步何时发生。

Answer 1

您可以在现代浏览器中查看 window.onhashchange。如果您想要交叉兼容，请查看 http://benalman.com/projects/jquery-hashchange-plugin/

此页面还有关于 window.onhashchange 的更多信息。

编辑:您基本上用类似的链接约定替换所有 anchor 名称，然后使用 .scrollTo 处理滚动:

$(document).ready(function () {
  // replace # with #_ in all links containing #
  $('a[href*=#]').each(function () {
      $(this).attr('href', $(this).attr('href').replace('#', '#_'));
  });

  // scrollTo if #_ found
  hashname = window.location.hash.replace('#_', '');
  // find element to scroll to (<a name=""> or anything with particular id)
  elem = $('a[name="' + hashname + '"],#' + hashname);

  if(elem) {
       $(document).scrollTo(elem, 800,{onAfter:function(){
        //put after scroll code here }});
  }
});

参见 jQuery: Scroll to anchor when calling URL, replace browsers behaviour了解更多信息。