5

ここhttp://www.mcgarrybowen.com/en/を見て、上部のナビゲーションメニューをクリックすると、ページはクリックしたページの部分までスクロールします。

これは通常、で行われhref='#foo'ますが、ここではhref='/subpage'です。jQueryではスクロールアニメーションは問題ありませんが、私が何も知らないAJAXで魔法が起こっているのではないかと思います。

さらに興味深いことに、アドレスバーはこれらのhref値と双方向で同期します。http://www.mcgarrybowen.com/en/peopleに移動すると、ページが読み込まれてからスクロールしますが、アドレスバーを手動でスクロールすると、現在のサブページに更新されます。

これはどのように行われていますか?これを使用する特別な理由、たとえばSEOの場合はどうでしょうか。

前もって感謝します!

4

2 に答える 2

3

この機能を実現するためにこれ以上のリクエストは必要ないため、これはAJAXを使用していません。ここでは2つの側面が進行しているようです。必要なものまでスクロールすること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の更新については、 TwitterBootstrapの一部であるScrollSpyによって処理されているようです。

于 2012-12-05T17:37:59.883 に答える
0

基本的に彼がしていることは、ページ上のセクションの数と一致するナビゲーション内のアイテムの長さを取得することです。次に、クリックされたナビゲーションアイテムに基づいてセクションの位置を取得します。

于 2012-12-05T17:38:11.450 に答える