javascript - クリックするとページの一番上までスクロールします

Question

切り替えボタンの画像を切り替えるには、次のコードがあります。

$("#invio_scatola_on, #invio_scatola_off").click(function(){
    $("#invio_scatola_off").toggle();
    $("#invio_scatola_on").toggle();
});

実行されると、ブラウザはページの上部に移動します。なぜ？

Answer 1

おそらく、クリックした要素のデフォルトのアクションを防止する必要があります。

$("#invio_scatola_on, #invio_scatola_off").on('click', function(e){
    e.preventDefault();
    $("#invio_scatola_off, #invio_scatola_on").toggle();
});

Answer 2

アンカータグのクリックを#としてhrefにバインドしたと思うので、次のようなjavascriptのpreventDefault()を使用できます。

$("#invio_scatola_on, #invio_scatola_off").click(function(evt){
    evt.preventDefault();
    $("#invio_scatola_off").toggle();
    $("#invio_scatola_on").toggle();
});

Answer 3

あなたが提供したいくつかの情報に基づいて、ブラウザが一番上までスクロールしている場合は、デフォルトの動作を防ぐ必要があることを意味します.

ブラウザが現在の URL に「何か」を追加しているかどうかを確認します...

次のようにしてそれを防ぐことができます：

$("#invio_scatola_on, #invio_scatola_off").click(function(event){

  // prvent default behavior
  event.preventDefault();

  $("#invio_scatola_off").toggle();
  $("#invio_scatola_on").toggle();
});

仕組みの詳細については、jQuery のevent.preventDefault()を参照してください。

Answer 4

HTMLコードを投稿していないため、推測することしかできません。おそらく、あなたの 2 つの要素は とリンクしていhref="#"ます。ハンドラーをクリックすると、通常のアクションが起動#され、サイトのアンカー (一番上) に移動します。

試す：

$("#invio_scatola_on, #invio_scatola_off").click(function(event){
    $("#invio_scatola_off").toggle();
    $("#invio_scatola_on").toggle();
    event.preventDefault();
});

そして、それが役立つかどうかを確認してください。jQuery を使用したイベント キャンセルの詳細については、次を参照してください。

http://api.jquery.com/event.preventDefault/