滾動到頁面底部，重新加載然后重復

Question

我已經檢查了所有可能與此相關的問題，但是我似乎找不到適合我的情況的任何東西，無論答案是不好還是不完整。

就我而言，我有一個帶有一些php的html頁面，顯示比賽結果。 隨着比賽的進行，結果頁面應滾動到頁面底部，然后頁面應刷新（這樣可能會出現新的得分），然后一次又一次地重復。 什么是對我的問題最好的解決方案？

隨着結果頁面上的表中包含更多數據，頁面大小/長度將增加。

圖片：

編輯 ：

此代碼現在滾動到頁面的底部，然后跳回頂部和重復及其正是我想要的，但我想一個頁面refresh我每次見底的時間和after this去頂。

$(function() {


  var pageScan = {
      speed : 10000,
      loop  : true,
      delayRestart : 1000, 
      start : function(){
          pageHeight = $('body').height() - window.innerHeight;
          pageScan.proc(pageHeight);
      },
      proc  : function(to){
          $("body").animate(
              {scrollTop: to}, 
               pageScan.speed,
               "linear",
               function(){
                  if (pageScan.loop) {
                      setTimeout(function() {
                          window.scrollTo(0, 0);
                          pageScan.start();
                      }, pageScan.delayRestart);
                  }
          });
      }
  };

  pageScan.start();

  });

Answer 1

您可以在頁面中添加一些JavaScript：

<script>
window.scrollTo(0,document.body.scrollHeight);
setTimeout(function (){location.reload()},5000);
</script>

Answer 2

這可能是您要尋找的：

// Test data, ignore
for(i = 1; i < 21; i++) {
    $('#results').append('<p>Test Result No.' + i + '</p>');
}

// Check every second (for example) if there is new data
// In this example there is always data
window.setInterval(function(){
  update_results();
}, 1000);

// Check for new results
function update_results() {
    $.ajax({
    type: 'POST',
    // Test data, ignore
    data: {
      html: 'new result'
    },
    // your ajax.php file
    url: '/echo/html/',
    success: function(data) {
      // Append new results to $('#results');
      // You might want to give back an array and loop through it with $.each(data, function() {});
      // you might also want to check for "false" if there are no new results
      $('#results').append('<p>' + data + '</p>');

      // Scroll to bottom smoothly
      $('html, body').animate({ scrollTop: $(document).height() }, 'slow');
    }
  });
}

jsfiddle

在您的ajax.php文件中，您可以回顯新分數：

echo json_encode($scores);

鑒於$ scores是您可能從數據庫中獲得的分數數組。