web-dev-qa-db-ja.com

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

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

Jqueryとアンカー要素にアタッチされたクリックイベントを使用して問題が発生しています。 [1]： jQueryハイパーリンク-href値？ "これ" SO質問は重複しているようで、受け入れられた回答は問題を解決していないようです。これが悪い場合は申し訳ありません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();

jsajax関数を呼び出す前後。それでも上にスクロールします。

jqueryajaxclickscrollanchor
18
Dan.StackOverflow

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

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

そのshouldは、機能しない場合は何か問題があり、さらにコードを表示する必要があるという意味で機能するはずだからです。ただし、完全を期すために、これを試すこともできます。

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

[〜＃〜]編集[〜＃〜]

これがこの動作の例です 。

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

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

18
Paolo Bergantino

ティラルが上で言ったように：

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

アンカータグの見栄えを維持し、javascriptを使用してクリックハンドラーを割り当てることができ、スクロールしません。このため、広く使用しています。

5
GaryM

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

5
Tilal Husain

jQuery Eventオブジェクト から正しい関数を使用していると述べられているため、この質問はデバッグの演習になります。

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

3
Jeff Meatball Yang
$("#id_of_anchor").click(function(event) { 
  // ...
  return false;
}
2
tom

ただ失う

href="#"

Htmlタグでは...それがWebページを「ジャンプアップ」させる原因です。

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

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

cursor: pointer;

あなたのaのcssに、マウスオーバーのリンクのように見えるようにします。

幸運を。

1
Sir Code-A-lot

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

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

0
Elie

以下のコードで大いに役立ちました。ありがとうございました！

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