jqueryアンカー要素をクリックすると、上にスクロールしますか？

Question

jQuery hyperlinks - href value?テキスト] [1]

アンカー要素に添付されたjqueryとclickイベントを使用して問題が発生しています。 [1]：jQuery hyperlinks - href value? "この" SOの質問は重複しているようで、受け入れられた答えは問題を解決していないようです。申し訳ありませんが、これは悪いので、SOのエチケット。 、リンクがクリックされたときに

<a href="#" id="id_of_anchor"> link text </a> 

しかし、Ajaxの機能を必要に応じて実行されます。

jQuery("#id_of_anchor").click(function(event) { //start function when any update link is clicked 
     Function_that_does_ajax(); 
     }); 

と私のアンカーは次のようになります。私の.ready（）関数で

は私が持っていますブラウザはページの上部にスクロールします。良くない。

event.preventDefault(); 

AJAXを行い、私の関数を呼び出す前に、それは助けにはならない：

私が追加しようとしました。 私は何が欠けていますか？

明確化

私は私のjs Ajaxの機能に私の呼び出しの前と後の

return false; 
event.preventDefault(); 
event.stopPropagation(); 

のすべての組み合わせを使用しました。それはまだ上にスクロールします。

Answer 1

これでうまくいくはずです。あなたは「以前」の意味を明確にすることはできますか？あなたはこれをしていますか？

jQuery("#id_of_anchor").click(function(event) { 
    event.preventDefault(); 
    Function_that_does_ajax(); 
}); 

そのが、それは働いていない場合は、何か間違ったことをやっているし、我々はより多くのコードを参照する必要があるだろうという意味で作業が必要があるため。

jQuery("#id_of_anchor").click(function() { 
    Function_that_does_ajax(); 
    return false; 
}); 

EDIT

Here is an example of this working：しかし、完全を期すために、あなたもこれを試みることができます。

2つのリンクが、このコードを使用します

$('#test').click(function(event) { 
    event.preventDefault(); 
    $(this).html('and I didnt scroll to the top!'); 
}); 

$('#test2').click(function(event) { 
    $(this).html('and I didnt scroll to the top!'); 
    return false; 
}); 

をそして、あなたが見ることができるように、彼らはうまく働いています。

Answer 2

$("#id_of_anchor").click(function(event) { 
    // ... 
    return false; 
} 

Answer 3

この質問は、jQuery Event objectの正しい機能を使用していると言われているため、デバッグの練習になります。二つの基本的な事柄の

jQueryのイベントハンドラで

、あなたがいずれかを実行することができ、またはその両方、：

1. 防止（あなたのケースではA HREF =「＃」、）要素のデフォルトの動作：

jQuery("#id_of_anchor").click(function(evt) { 
    // ... 
    evt.preventDefault(); // assuming your handler has "evt" as the first parameter 
    return false; 
} 

2。 周囲のHTML要素にイベントハンドラに伝播するイベントを停止します。

jQuery("#id_of_anchor").click(function(evt) { 
    // ... 
    evt.stopPropagation(); // assuming your handler has "evt" as the first parameter 
} 

あなたが予想される動作を取得していないので、あなたは、一時的にAJAX呼び出しを取る設定のようないくつかの無害なコードに置き換える必要がありますフォームの値または-shudder- 警告（ "OK"）と、まだ上にスクロールするかどうかテストします。

Answer 4

javascript：void（0）;を使用できます。 in hrefプロパティ

Answer 5

私は同じ問題を抱えています。

DOMに要素を追加する前にイベントをバインドすると発生すると思います。

Answer 6

ティラルは、上記に述べたように：

<a id="id_of_anchor" href="javascript:void(0)" /> 

は右見てアンカータグを保持し、あなたはJavaScriptを使用して、それをクリックハンドラを割り当てることができます、とスクロールしません。我々はこの理由のために広範囲に使用する。

Answer 7

これは、以下のコードで私を大きく助けました。ありがとうございました！

 $(document).ready(function() { 
     $(".dropdown dt a").click(function(event) { 
     event.preventDefault(); 
      $(".dropdown dd ul").toggle('slow'); 
     });   
     $(".dropdown dd ul li a").click(function(event) { 
     event.preventDefault(); 
      $(".dropdown dd ul").hide(); 
     }); 
    }); 

Answer 8

だけのhtmlタグで

href="#" 

を失う...それは "ジャンプアップ" するために、Webページを引き起こして何。

<a id="id_of_anchor"> link text </a> 

、それはマウスオーバーでリンクのようになりますので、あなたのAのCSSに

cursor: pointer; 

を追加することを忘れないでください。

幸運。