防止 .click 函数跳转到页面顶部答案

【问题标题】：Prevent .click function jumping to top of the page防止 .click 函数跳转到页面顶部
【发布时间】：2015-05-10 00:02:10
【问题描述】：

我使用下面的代码来模拟 .animate 切换效果。但是，当点击页面时会跳转到顶部。我试过使用 prevent 但它仍然会跳，所以我认为我遗漏了一些东西......有什么想法吗？

$(function() {
$('.menu-toggle').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {// odd clicks 

    $(this).find('i').toggleClass('fa-bars fa-times');
    $(this).toggleClass('cross');
    $('.menu-over ul li').toggleClass('animated-fast slideInLeft')

    $(".menu-over").animate({
    left: "-50%",
    }, 1000 );

    $( ".mainsite" ).animate({
    left: "0%",
    width:"100%" ,
    }, 1000 );

  } else {// even clicks

    $(this).find('i').toggleClass('fa-bars fa-times');
    $(this).toggleClass('cross');
    $('.menu-over ul li').toggleClass('animated-fast slideInLeft')

    $(".menu-over").animate({
    left: "0%",
    }, 1000 );

    $( ".mainsite" ).animate({
    left: "50%",
    width:"50%" ,
    }, 1000 );

  }
  $(this).data("clicks", !clicks);
});
});

【问题讨论】：

你的点击元素是<a>吗？检查preventDefault()
在 a 的 href 中使用 javascript:void(0) 来避免任何操作

标签： jquery jquery-animate toggle page-jump

【解决方案1】：

在函数结束时尝试return false。问候

【讨论】：

感谢这些，不幸的是它仍然跳到顶部。我认为这与导致它的奇数/偶数点击功能有关，但无法弄清楚......

【解决方案2】：

您的点击事件中应该有.preventDefault()：

  $('.menu-toggle').click(function(event) {
         event.preventDefault();

或者您可以使用return false;，这在您的情况下应该以相同的方式工作：

  $('.menu-toggle').click(function(event) {
         return false;

【讨论】：

感谢这些，不幸的是，它们都不起作用。我认为这与导致它的奇数/偶数点击功能有关，但无法弄清楚......

【解决方案3】：

想通了。感谢所有建议，但奇怪的是没有一个有效。 .mainsite 上的宽度动画导致了它。将其更改为填充效果，现在单击时所有内容都保持不变。

【讨论】：