BackboneJS - 干扰正常的哈希行为答案

【问题标题】：BackboneJS - interfering with normal hash behaviourBackboneJS - 干扰正常的哈希行为
【发布时间】：2014-08-14 04:06:54
【问题描述】：

我正在使用带有路由器的 BackboneJS 提供一个简单的页面。

在我的一个 DOM 元素上，我有

<div id="1234">Content</div>

当我去

我希望页面滚动到该 DIV 所在的位置（这是预期的行为）。

但由于我使用的是 Backbone，它一定会干扰它，因为它不能正常工作。我阅读了主干文档，它似乎无法识别哈希值，我想我可以为所有不匹配的设置“Catch all”路由（Is there a way to catch all non-matched routes with Backbone?）

但我如何才能真正做到我想要的行为方式（即让页面滚动到正确的 div）？

【问题讨论】：

【解决方案1】：

好的，首先介绍一下背景。在网络的早期，浏览器有这些东西叫做锚点，或者你现在知道的a标签：

<a name="foo">

锚可以让你“收藏”页面的一部分，这样你就可以专门链接到该部分：

<a href="#foo">

最终，浏览器也添加了 ID 属性作为锚点。

然后现代 JS 和 Backbone 出现了，这就是麻烦开始的地方，因为 Backbone 路由器劫持了那个系统。这意味着如果你想使用 Backbone 的路由器，你就失去了拥有普通锚点的能力。

但是，一切都没有丢失。一种选择是让 Backbone 不使用其路由器的 URL 哈希，而是依赖浏览器的“推送状态”。您可以通过在启动路由器时传递一个额外的选项来做到这一点：

 Backbone.history.start({pushState: true})

您可以在此处详细了解该方法的局限性： http://backbonejs.org/#History

但简短的版本是它只适用于此处标记为绿色的浏览器：

另一种方法是使用 jQuery 重新创建您自己的锚点系统。基本上，当您的路线都不匹配时，您可以创建一个失败：

 if (!Backbone.history.start() {

然后在那个失败中，您可以使用 jQuery 手动滚动到所需的点：

     $('html, body').animate({
         scrollTop: $('#' + window.location.hash).offset().top
     }, 1000);

您也可以花哨并定义自定义路线，而不是使用 fallthrough，但我会留给您。

除了这些选项之外，@Pramod 链接到一个问题的答案，其中包含您还可以考虑的其他选项（例如修改主干路由器以在其中构建滚动功能）。

【讨论】：

任何人都知道如何使用 ReactJS 完成手动滚动。
在 cmets 中提出单独的问题是在 Stack Overflow 上获得帮助的错误方式。如果您实际上为您的问题开始一个新的（堆栈溢出）问题，您将获得更大的成功。