页面

Question

我正在尝试在我的网站页面之间设置转换，如下所示：http://emilolsson.com/hi-response/（点击'查看示例'进入'3模块生成器'部分）。

所以这是Animate的scrolltop和fade的混合。

这是我目前的代码：

$(document).ready(function() {

  $('#content').css({opacity: 0});

  $('#content').fadeTo(250, 1);

  $('a').click(function(event) {
    event.preventDefault();
    linkLocation = this.href;
    $('#content').fadeTo(250, 0, function() {
      $('html, body').animate({
        scrollTop: 0
      }, 500, redirectPage);
    });
  });

  function redirectPage() {
    window.location = linkLocation;
  }
});

我的HTML标记如下所示：

<div id="header" style="position: fixed;">
  <a href="newpage.php">Link</a> 
</div>
<div id="content">
  <p>Content</p>
</div>

正如你所看到的，我试图让这个效果啄食顺序：

• 页面加载时的内容淡入

• 单击链接时，内容为fadeOut

• 然后是窗口scrolltop

• 最后我们得到了新的页面

• 页面加载时的内容淡入

但是我遇到了一些问题： - 新页面的内容在转换之前快速显示，因此它会轻弹 - 当您点击页面底部的链接

时，滚动顶部过渡太快

有什么想法改进我的代码吗？

非常感谢！