从底部开始，然后向上滚动

Question

我试图使我的网站从下到上的页面加载动画。

就像在这个网站上：http://partnersandspade.com/studio/

问题是，我的网站开始滚动从一半在我的网站，而不是从底部。

我现在拥有的是：

jQuery(window).load(function(){
    $('html,body').animate({ scrollTop: $(document).height() }, 0);
    $('html,body').animate({ scrollTop: 0 }, 4000);
});

有什么建议吗？

Answer 1

每次用户滚动时，您都要求jQuery动画。因为这会触发滚动事件：

$('html, body').animate({ scrollTop: x });

您将无休止地上下滚动您的页面。

使用imagesLoaded：https://github.com/desandro/imagesloaded

// are those images loaded yet?
$('body').imagesLoaded(function() {
  var dh = $(document).height();

  // set the html, body to bottom while you're at opacity 0
  $('html, body').animate({ scrollTop: dh }, 0);

  // transition to opacity 1
  $('body').addClass('loaded');

  // animate to the top
  $('html, body').animate({ scrollTop: 0}, 2000);
});

添加加载状态

要添加一个加载状态，我会这样做。

CSS

 body {
   opacity: 0;
   -webkit-transition: opacity 0.5s;
   -moz-transition: opacity: 0.5s;
   transition: opacity 0.5s;
 }
 body.loaded {
   opacity: 1;
 }

Answer 2

你不需要看滚动事件。您可以简单地删除它，并启动动画加载。

jQuery(window).load(function(){
      $('html,body').animate({ scrollTop: 7000 }, 0);
      $('html,body').animate({ scrollTop: 0 }, 2000);
});

它只会触发动画一次。

编辑：

您可以将滚动设置为页面的末尾。和其他答案一样：

jQuery(window).load(function(){
      $('html,body').animate({ scrollTop: $(document).height() }, 0);
      $('html,body').animate({ scrollTop: 0 }, 2000);
});

Answer 3

这应该有效：http://jsfiddle.net/ck52vb3k/

您只需删除动画上的滚动函数即可。

代码：

$(window).ready(function(){
    $('html,body').animate({ scrollTop: 7000 }, 0);  
    $('html,body').animate({ scrollTop: 0 }, 2000); 
});