如果您在此处查看http://www.mcgarrybowen.com/en/ 并单击顶部导航菜单，页面将滚动到您单击的页面部分。
这通常使用href='#foo' 完成，但这里是href='/subpage'。滚动动画在 jQuery 中是没有问题的，但我认为魔法可能发生在 AJAX 上，我对此一无所知。
更有趣的是，地址栏可以双向同步这些 href 值；如果我导航到http://www.mcgarrybowen.com/en/people，页面加载然后为我滚动，但如果我手动滚动地址栏更新到当前子页面。
这是怎么做到的？有什么特别的理由使用它，比如 SEO？
提前致谢！
【问题讨论】：
标签： jquery html ajax seo scroll
这不使用 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 处理，这是 Twitter Bootstrap 的一部分。
【讨论】：
基本上他所做的是获取与页面上的部分数量相匹配的导航中项目的长度。然后他根据点击了哪个导航项来获取该部分的位置。
【讨论】：