DIV要素内を下から上にスクロールする

JavaScript 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>ここをぐるぐるまわすんじゃ〜なかったのかぁ〜・・・</title>
<style type="text/css">
#waku {
  padding    : 0;
  overflow   : auto;
  height     : 20px;
}
</style>

<body>
<div id="waku">
  なんだタイトルをまわすのじゃなかったのかぁ〜<br>
  まぁ〜たしかにほそくをみれば、しからうえにって<br>
  かいてあったよね〜<br>
  いつものように、りかいりょくないなぁ〜<br>
</div>


<script type="text/javascript">

var Roller = function ( ) {
  this.init.apply( this, arguments );
};

Roller.prototype.init = function ( targetId, step, interval, cssText ) {
  var cnt, o;
  var e = document.getElementById( targetId );
  if( 'DIV' !== e.nodeName ) return;
  
  var ne = document.createElement( 'DIV' );
  ne.style.cssText = cssText;
  ne.style.marginBottom = e.offsetHeight + 'px';
  ne.style.marginTop = e.offsetHeight + 'px';
  for( cnt = 0; o = e.firstChild; )
     ne.appendChild( o );
  e.appendChild( ne );
  e.style.overflow = 'hidden';
  
  this.e = e;
  this.step = step;
  this.hMax = ne.offsetHeight + e.offsetHeight;
  this.top = 0;
  this.interval = interval;
  this.timerId = null;
};

Roller.prototype.start = function ( n ) {
  if( 'undefined' === typeof n || 'number' !== typeof n ) n = -1;
  this.flag = n;
  this.timerId = setInterval( (function ( that ) {
    return function ( ) {
      that.loop();
    };
  })( this ), this.interval );
};

Roller.prototype.stop = function ( ) {
  clearInterval( this.timerId );
};

Roller.prototype.loop = function ( ) {
  this.e.scrollTop = this.top;
  this.top += this.step;
  if( this.top > this.hMax ) {
    this.top = 0;
    if( this.flag > 0 ) {
      this.flag -= 1;
      if( 0 == this.flag ) this.stop();
    }
  }
};

(new Roller( 'waku', 1, 10 )).start();
</script>
</body>

一応、オブジェクトにしてあるので、複数の箇所で、違うタイミングで動くと思う。