当 Backbone 中的 hashchange 触发时，使用 jquery 滚动窗口无法设置动画答案

【问题标题】：Scrolling the window with jquery fails to animate when triggered by a hashchange in Backbone当 Backbone 中的 hashchange 触发时，使用 jquery 滚动窗口无法设置动画
【发布时间】：2013-04-17 20:27:16
【问题描述】：

我有一个基本上看起来像这样的函数：

function scroll(scrollTop) {
  $("body,html").animate({scrollTop: scrollTop});
}

在主干路由中，我尝试使用此功能滚动到页面上的某个位置，再次简化：

var Router = Backbone.Router.extend({
  routes: {
    "": "index",
    "foo": "foo"
  },

  index: function () {
    scroll(0);
  },

  foo: function () {
    scroll($("#foo").offset().top);
  }
});

这适用于页面加载（如果加载“/foo”）、手动调用函数或利用 pushState（相对于哈希片段）路由。

但是使用哈希片段路由，动画会失败。滚动位置仍然会发生变化，但会立即发生变化，没有动画。

有解决办法吗？

【问题讨论】：

您的路线是否有可能与您页面上元素的 id 相对应？
@Loamhoof 是的，除了滚动到 0 的 index 路由之外，其他人实际上是通过 id 找到一个元素并滚动到它的 offset().top （我编辑了有问题的代码以反映这一点）。但是简单地滚动到 0 也有同样的问题。

标签： jquery backbone.js jquery-animate hashchange

【解决方案1】：

您所描述的实际上是浏览器在更改主题标签时的行为。也就是说，从domain.com 导航到domain.com#someId 就像要求浏览器“关注”页面中id 为someId 的元素一样。所以窗口将移动到这个元素。不幸的是，我不知道有什么解决办法。

您可能想看看我在寻找可能的解决方案时发现的这个讨论：Modifying document.location.hash without page scrolling。

【讨论】：

是的，就是这样，现在您已经指出了这一点，这很明显。不知何故，我多年来一直在使用 Backbone，但从未遇到过这种情况。我猜我的 dom ID 和路由巧合地从来没有匹配过。