CODEWITHSUNDEEP
javascripthtmljquerycss
Njwan
Njwan

Reputation: 49

How can I ready/start the page from the center instead of top?

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)

Upvotes: 0

Views: 63

Answers (1)

s.kuznetsov
s.kuznetsov

Reputation: 15213

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>

Upvotes: 1

Related Questions