单击后滚动到页面顶部

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