如何从中心而不是顶部准备/启动页面？

Question

我想在我的网站主页上做一些 animation，当它打开/准备好时，从页面中心开始，然后顺利上升到 JavaScript 或 HTML 或 CSS 的顶部？ （我正在寻找最简单的方法）

Answer 1

我在 jquery 上使用jquery scrollIntoView ()为你做了一个小例子。 此外，将setTimeout()设置为在滚动到页面顶部之前延迟。

这不是一个完美的解决方案，因为我仓促地完成了:)但是你可以改进我的解决方案。

 $(window).on('load', function() { $("body")[0].scrollIntoView({ block: "center" }); setTimeout(function(){ $("html, body").animate({ scrollTop: 0 }, 1000) }, 3000); });

 .main { display: flex; flex-direction: column; }.header { height: 100px; background-color: green; }.content { height: 3000px; background-color: yellow; }.footer { height: 100px; background-color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main"> <div class="header"> </div> <div class="content"> </div> <div class="footer"> </div> </div>