使用href ='/ subpage'滚动到部分页面,而不是href ='#foo'(JQuery？)

Question

如果您在这里查看http://www.mcgarrybowen.com/en/并单击顶部导航菜单,该页面将滚动到您单击的页面部分.

这通常是用href='#foo',但在这里href='/subpage'.滚动动画在jQuery中没有问题,但我认为魔术可能发生在AJAX上,我对此一无所知.

更有趣的是,地址栏以这两种方式同步这些href值; 如果我导航到http://www.mcgarrybowen.com/en/people,页面加载然后滚动我,但如果我手动滚动地址栏更新到当前子页面.

这是怎么做到的？使用这个的任何特殊原因,比如SEO？

提前致谢!

Answer 1

这没有使用 AJAX，因为不需要进一步的请求来实现此功能。这里似乎发生了两个方面：滚动到所需的位置section并根据当前位置更新 URL。

正如 Alex 指出的，滚动似乎是由 PageScroller.js 库处理的。我不能说我熟悉这个特定的脚本，但通过查看导航链接的源，您可以看到它们包含nav-item-id与它们“链接”到的部分相对应的数据。例如

关于链接：

<a data-nav-item-id="9D8C69C00E8E43D39F18F1B78F073554" href="/en/About">About</a>

关于部分：

<section id="about" class="about" data-omgb-item-id="9D8C69C00E8E43D39F18F1B78F073554">
     (content)
</section>

我建议只使用一个监听器来监听导航链接上的点击事件，以防止默认行为并滚动到相关部分。

至于根据您正在查看的部分进行 URL 更新，这似乎是由ScrollSpy处理的，ScrollSpy 是 Twitter Bootstrap 的一部分。