单击后，它会滚动到页面顶部

It scrolls to the top of the page after clicking

本文关键字：顶部 滚动 单击      更新时间：2023-09-26

我有以下代码来切换切换按钮图像：

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

当它被执行时，浏览器会转到页面顶部。为什么？

您可能需要阻止单击的任何元素的默认操作：

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

根据您提供的少量信息，如果浏览器滚动到顶部，则意味着您需要阻止其默认行为。

检查浏览器是否将"某些内容"附加到当前 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（） 以获取有关其工作原理的更多信息。

我只能猜测，因为你没有发布你的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/

我认为您将锚标签的单击与 href绑定为# ，以便您可以使用 javascript 的 preventDefault（），例如：

$("#invio_scatola_on, #invio_scatola_off").click(function(evt){
    evt.preventDefault();
    $("#invio_scatola_off").toggle();
    $("#invio_scatola_on").toggle();
});
相关文章：