使用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数据。 e.g。

关于链接：

<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处理，这是Twitter Bootstrap的一部分。

Answer 2

基本上他正在做的是获取导航中与页面上的部分数量相匹配的项目长度。然后，他根据点击的导航项获取该部分的位置。