單擊后滾動到頁面頂部

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

根據您提供的一些信息，如果瀏覽器滾動到頂部，則意味着您需要防止其默認行為。

檢查瀏覽器是否在當前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 3

我只能猜測，因為您沒有發布html代碼。 您的兩個元素很可能是帶有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/

Answer 4

我認為您將帶有href的 錨定標記的單擊 綁定為＃，因此可以使用javascript的 preventDefault（） ：

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