Question

我有一些可以出现在许多不同页面上的JavaScript。有时这些页面是通过包含锚引用的URL访问的（例如＃comment-100）。在那些情况下，我希望javascript延迟执行，直到窗口跳转。现在我只是使用延迟，但这非常hackish，显然在所有情况下都不起作用。我似乎无法找到任何与“跳转”窗口相对应的DOM事件。

除了简单的延迟之外，我提出的唯一解决方案是让JS在URL中查找锚点，如果找到了，请注意scrollTop中的更改。但这似乎有些错误，而且我不能100％确定我的脚本在滚动发生之前总会被触发，因此只有在用户手动滚动页面时它才会运行。无论如何，我真的不喜欢这个解决方案而且更喜欢更多事件驱动的东西。有什么建议吗？

修改以澄清：

我不是要检测哈希变化。请看以下示例：

Page index.php包含指向post.php＃comment-1
用户点击post.php＃comment-1
post.php＃comment-1 loading
$（document）.ready fires
不久之后，浏览器会向下滚动到＃comment-1

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

Answer 1

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

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

编辑：您基本上用类似的链接约定替换所有锚名称，然后使用.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。

Answer 2

好像你可以使用window.onscroll。我刚刚测试了这段代码：

<a name="end" />
<script type="text/javascript">
    window.onscroll = function (e) {
        alert("scrolled");
}
</script>

似乎有用。

编辑：嗯，它在IE8中不起作用。它可以在Firefox和Chrome中使用。

编辑：jQuery有一个.scroll()处理程序，但它在浏览IE之前触发，似乎不适用于Chrome或Firefox。

Answer 3

要检测元素何时出现在屏幕上，请使用appear插件：

$('#comment-1').appear(function() {
  $(this).text('scrolled');
});

如何判断页面是否已跳转到javascript中的锚点（＃）？

3 个答案: