jqueryアンカー要素をクリックすると強制的に上までスクロールしますか?

Question

jQuery ハイパーリンク - href 値? テキスト 1]

jqueryとアンカー要素にアタッチされたクリックイベントを使用すると問題が発生します。[1]: jQuery ハイパーリンク - href 値? 「この」SOの質問は重複しているようで、受け入れられた回答は問題を解決していないようです。これがエチケットとして間違っていたらごめんなさい。

私の .ready() 関数には次のものがあります。

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

私のアンカーは次のようになります:

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

しかし、リンクをクリックすると、ajax 関数は希望どおりに実行されますが、ブラウザーはページの一番上までスクロールします。良くない。

追加してみました:

event.preventDefault(); 

ajaxを実行する関数を呼び出す前に、しかしそれは役に立ちません。私には何が欠けているのでしょうか？

説明

あらゆる組み合わせを使ってきましたが、

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

js ajax関数を呼び出す前と後。まだ上までスクロールします。

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;
});

編集

ここでは一例ですこの作業.

二つのリンク利用コード:

$('#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

javascript:void(0); を使用できます。href プロパティにあります。

Answer 3

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

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

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

Answer 4

この質問は、正しい関数を使用していると述べられているため、デバッグ演習のようなものです。 jQueryイベントオブジェクト.

jQuery イベント ハンドラーでは、次の 2 つの基本的なことのいずれか、または両方を実行できます。

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 呼び出しを一時的に削除し、フォーム値の設定などの無害なコードに置き換える必要があります。 アラート("OK") そして、まだ一番上までスクロールするかどうかをテストします。

Answer 5

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

Answer 6

ちょうど失う。

href="#"

HTMLタグ内にある...それは「ジャンプアップ」するためのWebページを引き起こして何ます。

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

と

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

cursor: pointer;

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

幸運ます。

Answer 7

私は同じ問題を抱えてきました。

私はあなたがDOMに要素を追加する前にイベントをバインドするときに発生すると考えます。

Answer 8

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

        $(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();
        });
    });