How to make the picture move up to the center of the screen after a second after the page is loaded-CodePudding

I have a question! I have a picture on the lower part of the picture when the mobile phone is installed. I hope that after entering the website, the user can automatically pull the duck screen up a little after 1 second, so that the duck can be displayed on the mobile phone. Right in the middle>

But I have two problems now, because my program has not been a web program for a long time, I don’t know if I can write it like this ? What about the middle? 2. How to make the duck scroll to the middle after one second after the page is loaded?

Thank you for seeing my question, whether or not you have helped me with the above questions.

window.onload =  function(){
    $('html,body').animate({scrollTop:600},1000);
}

body{
  width: 100%;
  height: 1200px;
  display: flex;
  justify-content:center;
  align-items:center;
}
#js-duck{
  display: inline-block;
  width:200px;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="js-duck" src="https://upload.cc/i1/2022/02/15/UB1kXd.png" alt="duck">

CodePudding user response：

In order to run delayed code you can use the setTimeout() function;

...
setTimeout(function() {
   // Delayed code here
}, 
1000); // Time after which the code gets executed in seconds (1000 = 1s)
...

About displaying an element in the middle, you can set element's display property to anything inline (which img already is) and use text-align: center; on the parent. For vertical alignment I personally use quite an outdated solution, so I'll leave it up to someone else.