如何阻止 JQuery Animate 函数移动整个页面答案

【问题标题】：How to stop JQuery Animate function from moving entire page如何阻止 JQuery Animate 函数移动整个页面
【发布时间】：2013-03-19 16:42:18
【问题描述】：

我无法让动画函数仅移动指定的 DIV。相反，它会移动整个页面。如果您单击下面链接上的“RSVP”，您可以看到我在说什么。我尝试将其切换为仅调用某些 ID（即 .wrap 与 #header），但它没有做任何事情。你如何让它只为标题设置动画而不滚动其他任何内容？

这是我的代码。还有更多，但我只包含了具有淡入淡出/滚动属性的 JQuery：

  $.ajax({
    type: "POST",
    url: "http://mktietheknot.com/wp-content/themes/Retro/rsvp-process.php",
    data: dataString,
    dataType: "json",
    success: function(data) {
      if ( data.status == 'pass' ) {
        $('#rsvp-form').fadeOut(function(){

          $('#rsvp-form').html('<div class="rsvp-received">' +data.response+ '</div>').fadeIn(1000);

        });

        myTimer = $.timer(2500,function(){

          $('#rsvp .rsvp-link').click();

        });

      }
      else {

        $('#rsvp-form').append('<div class="error">' +data.response+ '</div>');
        $('#rsvp .submit').fadeIn('500');
        console.debug(data);

      }
    }
  });

  return false;            

  });
});

  $('#nav-rsvp a').unbind();
$('#nav-rsvp a, .rsvp-link').click(function(){
  if ( $('.wrap').hasClass('open') ) {
  $('.wrap').animate({
  top: '-=115'
  }, 750, 'easeInOutCubic');
  $('.wrap').removeClass('open');
  } 
  else {
  $('.wrap').animate({
  top: '+=115'
  }, 750, 'easeInOutCubic');
  $('.wrap').addClass('open'); 
}
return false;
});

})(jQuery);

这是他对 CSS 的赞美：

/* === Header Section === */
#header {
background:url(wp-content/themes/Retro/images/structure/body_bg.png) repeat-x scroll center bottom transparent;
padding: 0 0 13px;
position:fixed;
width: 100%;
z-index: 100;
}
#header .section_inn {
padding-top: 0;
background:url(http://mktietheknot.com/wp-content/themes/Retro/images/structure/body_bg_brown.png) repeat-x;
width: 100%;
height: 130px;
z-index: 1000;
}
#header .wrap {
background: none repeat scroll 0 0 transparent;
width: auto;
top:-115px;
}

谢谢大家！

【问题讨论】：

编辑：我尝试将动画限制为 10 像素，但网页上的滚动长度保持不变。有趣的是，这让我觉得问题出在 Wordpress 主题附带的预先存在的 JQuery 上......

标签： jquery css html scroll jquery-animate

【解决方案1】：

尝试为#header 上的顶部样式设置动画。它需要被动画化为

#header {top:115px}

【讨论】：

感谢您的建议，我尝试切换回页眉，但是当您单击链接时它仍在滚动页面。
如果我使用 chrome 的元素检查器更改 css，#header { margin-top:115px } 怎么样，它看起来会起作用。 #header 是 position:fixed 所以它不应该影响页面的其余部分。
我刚刚在 mac 上的 firefox、safari 和 chrome 上检查了它，它工作正常。
在 win7/ie8、vista/ie7、win7/ie9、win8/ie10 上也可以。
感谢 Gavin 的尽职调查，我很感激。我偶然发现了修复程序，请参阅顶部评论。导致它崩溃的是 jQuery onload 语法。

【解决方案2】：

我偶然发现了修复。我的 JQuery 文件从我之前的问题中有一个工作负载。见(my previous question)。但是，当我弄乱 wordpress 主题附带的默认 jquery 文件时，我发现它们的 onload 有点不同。我试着改变它只是为了踢球，它修复了它。不知道为什么，但确实如此。

修复将 (function($){})(jQuery); 更改为

jQuery.noConflict();
jQuery( document ).ready( function( $ ) {} );

【讨论】：