Infinite Scroll in both directions

javascript, jquery

Solution

Here is a working fiddle: http://jsfiddle.net/2L23c/

And here is the javascript:

(function($){
    $(document).ready(function(){
        var html = $(".what").html();
        var what = '<div class="what">'+html+'</div>';
        $(window).scrollTop(1);
        $(window).scroll(function() {
            if ( $(window).scrollTop() >= ($('body').height() - $(window).height()) ) {
                $(".what").last().after(what);
                if ($(".what").length > 2) {
                    $(".what").last().prev().remove();
                    $(window).scrollTop($(window).scrollTop() - $(".what").first().height());
                }
            }
            else if ( $(window).scrollTop() == 0 ) {
                $(".what").first().before(what);
                $(window).scrollTop($(".what").first().height());
                if ($(".what").length > 2) {
                    $(".what").last().remove();
                }
            }    
        });
    }); 
})( jQuery );

Problem

I've been working on a small website and I want it to be scrollable and looped both upwards and downwards. I made a jsfiddle to show my problem. Currently I'm working with this method: ``` $(document).ready(function(){ $(window).scroll(function() { if ( $(window).scrollTop() >= ($('body').height() - $(window).height()) ) { $(window).scrollTop(1); } else if ( $(window).scrollTop() == 0 ) { $(window).scrollTop($('body').height() - $(window).height() -1); } }); }); ``` http://jsfiddle.net/2LDFA/ My problem is, that there is no transition, this method only works if the content at the top and bottom is exactly the same. Any Ideas how I can add the same div to top and bottom every time the user reaches the end?

Original source