javascript - 从底部开始然后向上滚动

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 });

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

使用已加载的图像: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;
 }