Wie man ständig scrollen Inhalt in einem DIV mit jQuery?

Ziel

Ziel ist es, zum einen haben Sie einen DIV-container mit fester Höhe und Breite und den HTML-Inhalt in das DIV automatisch scrollen vertikal kontinuierlich.

Frage
Im Grunde habe ich den code unter Verwendung von jQuery scrollen (verschieben) der child-DIV vertikal nach oben, bis Ihr außerhalb des umschließenden übergeordneten box, wo die animation dann fertig löst einen Ereignis-handler, die setzt die position des untergeordneten DIV-Element und startet den Prozess erneut.

Dies funktioniert gut, so ist der Inhalt scrollt lässt ein Leerzeichen und dann beginnt Sie von unten wieder und blättert.

Das problem, das ich habe ist, dass die Anforderungen für diese ist der Inhalt angezeigt, als wenn Sie Sie ständig wiederholen, siehe unten Diagramm, um besser zu erklären, gibt es eine Möglichkeit, dies zu tun? (Ich will nicht zu verwenden 3rd-party-plug-ins oder die anderen Bibliotheken als jQuery):

_{(Quelle: cameroncooke.com)}

Was ich bisher

HTML:

<div id="scrollingContainer">

  <div class="scroller">

    <h1>This is a title</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at orci mi, id gravida tellus. Integer malesuada ante sit amet enim pulvinar congue. Donec pulvinar dolor et arcu posuere feugiat id et felis.</p>

    <p>More content....</p>   

  </div>

</div>

Die CSS:

#scrollingContainer{
  height: 300px;
  width: 300px;
  overflow: hidden;
}

#scrollingContainer DIV.scroller{
  position: relative;
}

JavaScript:

/**
* Scrolls the content DIV
*/
function scroll() {

  if($('DIV.scroller').height() >  $('#scrollingContainer').height()) {

    var t = $('DIV.scroller').position().top + $('DIV.scroller').height();

    /* Animate */
    $('DIV.scroller').animate(
    {
      top: '-=' + t + 'px'
    }
    , 4000, 'linear', animationComplete);
  }
}

function animationComplete() {
  $(this).css('top', $('#scrollingContainer').height());
  scroll();
}