页面刷新预加载器页面位置问题答案

【问题标题】：Page Refresh Preloader Page Position Issue页面刷新预加载器页面位置问题
【发布时间】：2016-10-03 04:49:47
【问题描述】：

您好，我的预加载器有问题。如果我说在页面的一半处，然后单击链接或页面刷新，则下一页显示在最后一个位置（例如，在页面的一半处，就像我在上一页上一样。）我需要每个页面都位于顶部。这是我的代码：

$(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);
    });       
});

【问题讨论】：

你能用你的问题的一个工作示例制作一个 jsfiddle 吗？

标签： javascript jquery html preloader image-preloader

【解决方案1】：

您好根据这个Reload browser does not reset page to top找到答案

scrollTop 函数不能正常工作这里是工作示例

    $(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);
        });

});

【讨论】：

【解决方案2】：

将$(this).scrollTop(0); 放在（最小）延迟之后（稍后在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>

【讨论】：