向下滾動到底部。然後重新加載頁面，然後再次執行

Question

我正在使用這個簡單的代碼，它工作正常。

$("#mydiv").animate({ scrollTop: $('#mydiv')[0].scrollHeight}, 20000) 

我希望在達到底部之後立即返回到頁面頂部並開始再次慢慢向下滾動。在JQuery中如何實現這樣的功能？

謝謝你們！

Answer 1

，你可以跳回到您的網頁使用下面的JavaScript函數頂部：

function jump(elementId){ 
    var location = document.getElementById(elementId).offsetTop; 
    window.scrollTo(0, location);       
} 

只是使用一些元素的id在你的頁面的頂部。

Answer 2

不知道你正在做什麼「刷新」的意思，但在這裏是一個快速的片段，讓你開始：

JSnippet Demo

正如你可以看到它的配置和易於理解：

$(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 3

我們可以做一些更容易這樣的：

(function(){ 
    var div = $('#myDiv'), 
     infiniteScroll = function() { 

      //---gets the bottom of the page value 
      var bottomHeight = div[0].scrollHeight; 

      var callback1 = function() { 
       //once it gets into this callback function 
       //it resets the position to zero 

       div.scrollTop(0); 

       //invokes again the function infinite scroll 
       infiniteScroll(); 
      }; 

      div.animate({scrollTop:bottomHeight},20000,callback1) 
    }; 
    //starts the function for the very first time 
    infiniteScroll(); 

})(); 

我創建了一個codepen所以你可以看到它的工作和它玩：

http://codepen.io/dieggger/pen/VLoZWv?editors=101