Continuous Looping Seite (nicht unendlich Scroll)

Question

Ich bin für Ressourcen suchen, die Scroll-Funktionen wie die auf diesen Sites diejenigen erstellen:
Outpost Journal
Unfold

Sobald der Bildlaufleiste trifft den unteren Rand der Seite Ich möchte, dass es nach oben zurückkehrt. Ich bin vertraut mit der unendlichen Scroll, und das ist nicht was ich will. Ich habe auch Skripte gefunden, die den gleichen Inhalt am Ende der Seite schreiben/hinzufügen, aber keine, die zum Anfang der Seite zurückkehren.

Answer 1

Try this:

$('document').ready(function() { 
      $(document).scroll(function(){ 
      if(document.documentElement.clientHeight + 
      $(document).scrollTop() >= document.body.offsetHeight)$(document).scrollTop(0); 
      }); 
      }); 

Answer 2

Mrida Antwort meines Browser verursacht wurde nicht in der Lage sein, hier zu blättern ist eine modifizierte Version, die für mich gearbeitet:

$('document').ready(function() { 
    $(document).scroll(function(){ 
     if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) { 
     $(document).scrollTop(0); 
     } 
    }); 
    }); 

Answer 3

wenn Sie unendliche Scroll wollen in Beide Richtungen verwenden

(Ich weiß, es ist eine späte Antwort, aber es hilft immer noch Benutzer wie ich, die nur goo gle Sachen wie diese)

Answer 4

Hier eine Lösung, die ein Duplikat des Körpers macht, so dass die Unterseite und die Oberseite gleichzeitig an einem bestimmten Punkt gesehen werden können, so dass der Übergang glatter ist.

$('document').ready(function() { 

    // We need to duplicate the whole body of the website so if you scroll down you can see both the bottom and the top at the same time. Before we do this we need to know the original height of the website. 
    var origDocHeight = document.body.offsetHeight; 

    // now we know the height we can duplicate the body  
    $("body").contents().clone().appendTo("body"); 


    $(document).scroll(function(){ // detect scrolling 

     var scrollWindowPos = $(document).scrollTop(); // store how far we have scrolled 

     if(scrollWindowPos >= origDocHeight) { // if we scrolled further then the original doc height 
      $(document).scrollTop(0); // then scroll to the top 
     }  
    }); 

}); 

Answer 5

Hinzufügen Schleife Schleife rückwärts, Upgrade @ Clankill3r Antwort. Es sollte so etwas sein.

$('document').ready(function() { 

// We need to duplicate the whole body of the website so if you scroll down you can see both the bottom and the top at the same time. Before we do this we need to know the original height of the website. 
var origDocHeight = document.body.offsetHeight; 

// now we know the height we can duplicate the body  
$("body").contents().clone().appendTo("body"); 


$(document).scroll(function(){ // detect scrolling 

    var scrollWindowPos = $(document).scrollTop(); // store how far we have scrolled 

    if(scrollWindowPos >= origDocHeight) { // if we scrolled further then the original doc height 
     $(document).scrollTop(scrollWindowPos + origDocHeight); // then scroll to the top 
    } else if (scrollWindowPos == 0) { // if we scrolled backwards 
     $(document).scrollTop(origDocHeight); 
    } 
}); 
}); 

Ich benutze es horizontal und es funktioniert gut. Hoffe jemand findet es nützlich.

Answer 6

Gegabelt von @ clakill3r 's Antwort, erstellen Sie zwei Kopie des Körpers, vorhängen und an den ursprünglichen Körper anhängen, dann können Sie die Seite in zwei Richtungen endlos scrollen.

$('document').ready(function() { 

    var origDocHeight = document.body.offsetHeight; 

    var clone=$("body").contents().clone(); 
    clone.appendTo("body"); 
    clone.prependTo("body"); 

    $(document).scroll(function(){ 

     var scrollWindowPos = $(document).scrollTop(); 

     if(scrollWindowPos >= origDocHeight) { 
      $(document).scrollTop(0); 
     } 
     if(scrollWindowPos <= 0) { 
      $(document).scrollTop(origDocHeight); 
     }   
    }); 
});