1

我不知道我应该怎么称呼这个问题……这个问题的标题根本没有任何意义，我知道！

以下案例：我有一个单页布局，用户向下滚动。我有一些部分.layer，当在视口内时，应将地址栏中的哈希更改为其id. 因此，例如在.layer#one视口内，地址栏中的 url 看起来像这样 www.whatever.com/#!/one

$(window).scroll(function() {       
    hash = $('.layer:in-viewport').attr('id');
    top.location.hash = "!/" + hash;
});

这工作得很好，就像我想要的一样。我使用这种语法的原因!/是，如果我只是将位置设置为hash仅滚动行为，那将是错误的，因为浏览器试图坚持哈希位置。

现在的问题是，我希望能够使浏览器历史记录返回按钮工作！hashchange使用 jQuery 自带的函数， 这通常会相当简单……</p>

$(window).bind( 'hashchange', function( event ) {
    //query the hash in the addressbar and jump to its position on the site
});

我遇到的唯一问题是，如果在滚动时更改哈希值，也会触发 hashchange 函数。所以它会再次跳转或停留在浏览器中的当前位置。知道我该如何解决这个问题吗？我可能可以在滚动时取消绑定 hashchange，对吧？但这是最好的解决方案吗？

4

1 回答 1

2

当然，只要哈希在滚动时发生变化，您就可以解除绑定并重新绑定。例如：

var old_hash;

var scroller = function() {       
    hash = $('.layer:in-viewport').attr('id');

    if ( old_hash != hash ) {
      $(window).off('hashchange', GoToHash); // using jQuery 1.7+ - change to unbind for < 1.7
      top.location.hash = "!/" + hash;

      setTimeout(function() { // ensures this happens in the next event loop
        $(window).on('hashchange', GoToHash);
      }, 0);

      old_hash = hash;
    }
}

var GoToHash = function() {
  //query the hash in the addressbar and jump to its position on the site
}

$(window).scroll(scroller);
于 2012-01-03T21:51:19.570 回答