I have a query! There is an image at the bottom of the screen when my website is accessed on a mobile phone. I would like the duck in the picture to be automatically scrolled up slightly after 1 second of page load, so it appears right in the middle of the screen.
However, I am facing two issues as I am relatively new to web programming: 1. How can I ensure the duck image appears exactly in the middle? 2. How do I make the duck scroll to the center after one second of the page loading?
Thank you for taking the time to read my question and any help you provide regarding the above questions would be greatly appreciated.
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">