Javascript AutoScroll Loop Div Content

Question

I have this jsfiddle and I cannot for the life of me figure out how to make the content not have the gap when auto scrolling. Basically when the content reaches the bottom I want the loop to restart immediately so there is not a large gap between showing the divs again. Any help will be appreciated. Thanks.

Code I am using is

function autoScroll(){
var top = parseInt($(".inner").css("top").replace("px",""));
var height = $(".outer").outerHeight();
if(top <  height) {
   $(".inner").animate({"top":height},25000,autoScroll)           
}
else {
    $(".inner").css({"top":-height});
    autoScroll();
} 
}
autoScroll();

Answer 1

You could duplicate the contents of .inner , keeping the outer height unchanged, so that half of the content is hidden. Then animate such that at every cycle of height movement, you jump back. Because of the repeated content, this jump will not be apparent:

 function autoScrollDown(){ $(".inner").css({top:-$(".outer").outerHeight()}) // jump back .animate({top:0},5000,"linear", autoScrollDown); // and animate } function autoScrollUp(){ $(".inner").css({top:0}) // jump back .animate({top:-$(".outer").outerHeight()},5000,"linear", autoScrollUp); // and animate } // fix hight of outer: $('.outer').css({maxHeight: $('.inner').height()}); // duplicate content of inner: $('.inner').html($('.inner').html() + $('.inner').html()); autoScrollUp();

 *{ margin:0; padding:0; } .inner{ position:relative; top:0px; } .outer{ overflow:hidden; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="outer"> <div class="inner"> <h3>Scrolling down... line 3</h3> <h3>Scrolling down... line 2</h3> <h3> Scrolling down... line 1 </h3> <h3> Scrolling down... line 1 </h3> <h3> Scrolling down... line 1 </h3> <h3> Scrolling down... line 1 </h3> <h3> Scrolling down... line 1 </h3> <h3> Scrolling down... line 1 </h3> <h3> Scrolling down... line 1 </h3> <h3> Scrolling down... line 1 </h3> </div> </div>