javascript - Ajax加载导致内容跳转

Question

当我使用 Ajax 从另一个页面加载内容时，我的页脚会跳到页眉下方，然后再向下移动。

我认为这是由 $('#container').remove(); 引起的，这意味着我实质上是在加载到新容器之前删除容器。

有没有办法阻止我的页脚在 Ajax 加载之间上下跳跃？

这是我的 JQuery

$('nav a').on('click', function(e) {
   e.preventDefault();
   var url = this.href;
   $('nav a.highlight').removeClass('highlight');
   $(this).addClass('highlight');
   $('#container').remove();
   $('#content').load(url + ' #container').hide().fadeIn(3500);
});

我上传了一个测试服务器上发生的情况的示例 here 。
我必须将其作为片段上传，否则笔不允许多个 HTML 页面

Answer 1

不要删除#container

$('nav a').on('click', function(e) {
  e.preventDefault();
  var url = this.href;

  $('nav a.highlight').removeClass('highlight');
  $(this).addClass('highlight');

  //$('#container').remove();
  $('#content').load(url + ' #container').hide().fadeIn(3500);
});