Page Refresh Preloader Page Position Issue

Question

Hi There I am having a problem with my preloader. If I am say half way down a page and I click a link or page refresh the next page shows at the last position (e.g half way down page as I was on previous page.) I need every page to be at the top. Here is my code:

$(window).load(function(e){ 
    e.preventDefault();
    $('#status').fadeOut('slow'); 
    $('#preloader').fadeOut('slow'); 
    $(function(){
      $(this).scrollTop(0);
        setTimeout(function(){
        $('html, body').css({ "overflow-y":"auto"});}, 500);
    });       
});

Can you make a jsfiddle with a working example of your problem? — Cine, Oct 03 '16 at 04:58

score 0 · Accepted Answer · edited May 23 '17 at 11:55

Hi found the answer based on this Reload browser does not reset page to top

scrollTop function wasn't working properly here is working example

    $(window).load(function(e){ 
    e.preventDefault();
    $('#status').fadeOut('slow'); 
    $('#preloader').fadeOut('slow'); 
    $(function(){
        $('html').animate({scrollTop:0}, 1);
        $('body').animate({scrollTop:0}, 1);
        setTimeout(function(){
        $('html, body').css({ "overflow-y":"auto"});}, 500);
        });

});

score 0 · Answer 2 · answered Oct 03 '16 at 05:01

Put $(this).scrollTop(0); after a (Minimum)delay(Pushed later in event-loop)

$(window).load(function(e) {
  e.preventDefault();
  $('#status').fadeOut('slow');
  $('#preloader').fadeOut('slow');
  $(function() {
    setTimeout(function() {
      $(this).scrollTop(0);
    }, 0);
    setTimeout(function() {
      $('html, body').css({
        "overflow-y": "auto"
      });
    }, 500);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

Page Refresh Preloader Page Position Issue

2 Answers2