How To "Endless Document" Script (like Skittles.com)

How did they accomplish this? Have you guys seen: h开发者_如何学Gottp://www.skittles.com? The site never ends!

Well, here's one way of doing it:

$(document).ready(
    function(){
     $(window).scroll(
         function(){
             if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
                 $('div').clone().appendTo('body');
             } 
         }
        ); 
    }
    );

With the requisite JS Fiddle demo.

Bear in mind that any interactive content that's cloned/appended/inserted dynamically will require some kind live() or delegate() for jQuery to interact with them.

That said, there are caveats:

1. Infinite scrolling isn't necessarily a pleasant navigation aid, particularly if the user is likely to want to view some of the content half way down an infinite page.
2. There comes a point at which a browser will crash or become sluggish/unresponsive due to the sheer volume of content it's required to maintain in memory.