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

Question

i would like to do some animation in my website main page, when it's open/ready, to start from the center of the page then goes up smoothly to the top in JavaScript or HTML or CSS? (i'm looking for the easiest simplest way)

Answer 1

I made a small example for you using scrollIntoView () , on jquery . Also, set setTimeout() to delay before scrolling to the top of the page.

This is not a perfect solution, as I did it with a hastily:) But you can improve my solution.

 $(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>