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

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">
javascriptjquerycss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions