2

scrollspy のメニューがあります (Twitter のブーストラップを使用)。window.location.hashユーザーが次のセクションにスクロールしたときに更新したい。

次のコードは、ユーザーが下にスクロールすると機能します。

$(window).on('activate.bs.scrollspy', function (e) {
  location.hash = $("a[href^='#']", e.target).attr("href") || location.hash;
});

ただし、ユーザーが上にスクロールするとうまく機能しません。

この理由は、 new を設定するとlocation.hash、ブラウザーがそのそれぞれのアンカーに向かってナビゲートするようになるためです。それが連鎖反応を引き起こし、ユーザーは即座にページのトップにたどり着きます。

js-fiddle でのデモ

では、その問題を解決する最も簡単な方法は何でしょうか?

4

3 に答える 3

10

ブラウザーが新しい状態に従うようにトリガーすることなく、HTML5 の履歴を使用して URL の状態を変更することができます。これは、すべてのブラウザーでサポートされているわけではありません。

を使用history.replaceState()すると、ユーザーがブラウザの戻るボタンを使用したときに、最初にスクロールアップするだけでなく、追加の利点があります。

$(window).on('activate.bs.scrollspy', function (e) {
    history.replaceState({}, "", $("a[href^='#']", e.target).attr("href"));
});

動作中の js-fiddle を参照してください。

于 2014-04-15T13:11:31.607 に答える