Continuous Looping Page (Not Infinite Scroll)

Question

I'm looking for resources that create scrolling functions like the ones found on these sites:
Outpost Journal
Unfold

Once the scroll bar hits the bottom of the page, I want it to loop back to the top. I'm familiar with with the infinite scroll, and this is not what I want. I've also found scripts that will write/add the same content to the bottom of the page, but none that loop back to the top of the page.

Solution 1

Try this:

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

Solution 2

Here a solution that makes a duplicate of the body so the bottom and the top can be seen at the same time at a certain point so the transition is smoother.

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

 }); 

Solution 3

if you want infinite scroll in both directions use

if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) {
    $(document).scrollTop(0)
} else if ($(window).scrollTop() < 0) {
    $(document).scrollTop($(document).height())
}

(I know it's a late reply but it still helps users like me who just google stuff like this)

Solution 4

mrida's answer was causing my browser to not be able to scroll, here is a modified version that worked for me:

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

Solution 5

Forked from @clankill3r's answer, create two copy of body, prepend and append to the original body, then you can scroll the page in two direction endless.

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

View more solutions

Comments

[Beny]

You code doesn't work for me, so I changed this part else if ($(window).scrollTop() < 0) by else if ($(window).scrollTop() < 1)