5

如果您在此处查看http://www.mcgarrybowen.com/en/并单击顶部导航菜单，页面将滚动到您单击的页面部分。

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

更有趣的是，地址栏与这些 href 值同步；如果我导航到http://www.mcgarrybowen.com/en/people，页面加载然后为我滚动，但如果我手动滚动地址栏更新到当前子页面。

这是怎么做的？有什么特别的理由使用这个，比如搜索引擎优化？

提前致谢！

4

2 回答 2

3

这不使用 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 的一部分。

于 2012-12-05T17:37:59.883 回答
0

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

于 2012-12-05T17:38:11.450 回答