href =＃SomeDivNameをクリックするとページがスクロールします

Question

私はTwitterのBootstrapトップバーを使用しています。

私は

href=#SomeDivName

このページのナビゲーションキーを押したときと同様のhrefいくつかのナビゲーションをクリックしてください：ビットダウン

http://twitter.github.com/bootstrap/examples/fluid.html#contact

ページがスクロールします。

クリックした後に関連するセクションが表示されるようにしたいが、私は のページをスクロールしたくない。

Answer 1

$('a[href="#SomeDiveName"]').on('click', false); 

あなたは#SomeDiveNameに設定href属性を持つアンカータグをクリックしたとき、これはfalseを返します。要素のデフォルトの振る舞いを妨げます。この場合、href属性が参照する要素にスクロールします。

$('.stop-this-link').on('click', false); 

これですべての要素のデフォルトの動作を防ぐことができます：あなたはこれらのリンクのセットを持っている場合は

その後、私はあなたが一度にすべてを選択することができますので、それらを識別するためにクラスを追加することをお勧めしたいです要素がクリックされるたびにstop-this-linkクラス。クラスで選択するのは、属性よりもはるかに高速です。属性で検索する場合は、DOM内のすべての要素をチェックする必要があります。

jQueryイベントハンドラでfalseを返すことは、event.preventDefault()とevent.stopPropagation()を呼び出すのと同じことに注意してください。これらの関数についての詳細情報については

はこちらを参照してください。

• event.preventDefault()：http://api.jquery.com/event.preventdefault
• event.stopPropagation()：ジャスパーの答えが正しいかhttp://api.jquery.com/event.stoppropagation

Answer 2

あなたが他のものをバインドする場合は、しかし、あなたは、いくつかのすごみを得る可能性があります後で。

$('.stop-this-link').on('click', function(e){ e.preventDefault() }); 

基本的に同じことをしますが、重要なことは、少し冗長であることのコストで、DOMアップイベントの伝播を停止しない：私はこれを使用する傾向があります。

Answer 3

の代わり<a href="#target">使用<a data-target="#target">を使用し、href属性