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

这可能会有所帮助：

$( document ).ready(function(){
        $('html, body').animate({ scrollTop: $(document).height() }, 0);
        $('html, body').animate({ scrollTop: 0 }, 1000);    
});

以下是工作示例：
http://jsfiddle.net/xvafa479/

Answer 3

您无需观看滚动事件。你可以简单地删除它并开始动画onload。

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

它只会触发动画一次。

Editted：

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

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

Answer 4

这应该有效：http://jsfiddle.net/ck52vb3k/
您只需要删除动画上的滚动功能

代码：

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

从底部开始然后向上滚动

4 个答案: