使用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吗？

提前感谢！

- user1879851

---

老兄，看看那个网站上的PageScroller.js。 - Alex Gill

http://pagescroller.com/ - Chris Lewis

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

- RobMasters

---

我认为这对我回答了问题。谢谢！ - user1879851

Answer 2

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

- Alex Gill