从底部开始然后向上滚动

Posted 2023-05-08

【中文标题】从底部开始然后向上滚动

【英文标题】：Start at bottom then scroll up

【发布时间】：2015-02-24 02:31:46

【问题描述】：

我正在尝试使我的网站在页面加载时从下到上进行动画处理。 在本站点赞：http://partnersandspade.com/studio/

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

我现在拥有的是这样的：

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

有什么建议吗？

【参考方案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;
 

【讨论】：

这会在我的网站顶部添加一个巨大的空白区域，并且根本没有动画。我添加了html, body position: relative;

您可以将上述函数的内容粘贴到您的控制台中以验证它是否有效

当我输入 (document).ready 而不是 (window).load 时它可以工作，但现在我看到了问题，我在首页上的滑块在它开始之前还没有完成加载向上滚动，所以我想我应该在午餐这个脚本之前加载页面 100%？我该怎么做？

是的，因为您将它粘贴到您的控制台中，在一个已经加载并且所有资产都已计入的页面上，因此文档高度是正确的高度。对于您的项目，如果您使用 doc ready，则文档高度变量会有所不同。您需要等待所有资产加载完毕。

我明白了.. 但是 (window).load 也很奇怪.. 但就像我在帖子中提到的网站一样：partnersandspade.com/studio - 他们在内容准备好之前使用加载器.我想这可能会有所帮助。但是我该如何添加呢？如果还有很多工作，我可以为此提出一个新问题。

【参考方案2】：

这可能会有所帮助：

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

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

【讨论】：

是的，这应该可以。但我对此有疑问，因为它不会从底部滚动。它从那里开始。我发布的原始代码实际上从底部开始，具有相同的值（7000）。我想这与我的网站有关，因为 $(document).height() 也不起作用。

你可以尝试调试。一些提示：1. 提醒 $(document).height() 检查值 2. 降低动画速度$('html, body').animate( scrollTop: 0 , 2000);

返回7454，降低动画速度也无济于事。

尝试添加加载状态。设置 html 后，将 html 的不透明度、body 从 0 转换为 1，将 body 偏移 top 设置为文档的高度。

很抱歉成为这样的菜鸟。但我不知道该怎么做。你能给我举个例子吗？非常感谢您的帮助！

【参考方案3】：

您不需要观看滚动事件。您可以简单地删除它并开始加载动画。

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

【讨论】：

感谢您的回答。您在此处发布的代码应该可以正常工作，但在我这边，它不是从底部开始，它似乎几乎从窗口高度滚动。

【参考方案4】：

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

代码：

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