jQuery animate関数(scrollTopプロパティ)を使用して
マウスオーバーで、DIVブロックのテキストをスクロールアップ、ダウン(スクロール)する

通常、DIVブロックのテキストのスクロール(スクロールやダウン)は、スクロールバーをクリックしてスライドしますが、 これを、矢印アイコンなどをマウスオーバーして、スクロールするには、jQueryのanimate関数(scrollTopプロパティ)を使用 します。
マウスオーバーのスクロールは、setTimeout() メソッドを使用して、animate関数(scrollTopプロパティ) をループさせます。

setTimeout() メソッドを使用して、animate関数(scrollTopプロパティ)をループする例(基本構成)

<script type="text/javascript">
  $(document).ready(function(){
    $("#up-button").on('mouseenter', function(){ //スクロールアップボタン マウスオーバー(スクロール開始)
         ScrollUp(); 
    });
    $("#down-button").on('mouseenter', function(){ //スクロールダウンボタン マウスオーバー(スクロール開始)
         ScrollDown();
    });

    $("#up-button").on('mouseleave', function(){ //スクロールアップボタン マウスアウト(スクロール停止)
      clearTimeout(upTimer);
    });
    $("#down-button").on('mouseleave', function(){ //スクロールダウンボタン マウスアウト(スクロール停止)
      clearTimeout(downTimer);
    });
  });
  //スクロールは現在停止位置から、1回に30pxを300msかけて上または下に移動し(animate)、
  //これを350msごとにループする(setTimeout)。(px値、ms値は1例)
  function ScrollUp(){ //スクロールアップ実行 
       動作量px = 動作量px - 30; //スクロール位置pxは30づつカウントダウンされた値(30msは例)
       $('#divScrollTextCont').animate({scrollTop: スクロール位置px}, 動作時間ms, 'linear'); //スクロール。(例)動作時間ms=300
       upTimer = setTimeout( 'ScrollUp()' , 経過時間ms); //スクロールを繰り返す。 (例)経過時間ms=350
    }
  function ScrollDown(){ //スクロールダウン実行 
       動作量px = 動作量px + 30; //スクロール位置pxは30づつカウントダウンされた値(動作量pxの初期値=0。30msは例。)
       $('#divScrollTextCont').animate({scrollTop: スクロール位置px}, 動作時間ms, 'linear'); //スクロール。(例)動作時間ms=300
       downTimer = setTimeout( 'ScrollDown()' ,  経過時間ms); //スクロールを繰り返す。(例)経過時間ms=350 > 動作時間ms
    }

</script>

デモ:マウスオーバーで、DIVブロックのテキストをスクロールアップ、ダウン(スクロール)する

下の左が本題のデモです。矢印アイコンをマウスオーバーしてください。右は通常の表示例です。スクロールバーで操作してください。
これらのDIVブロックの要素の高さ(px)は、表のとおりです。左DIVはanimate関数、右DIVはscroll関数で操作しています。
各要素の値は、jQueryで取得していまが、項番4-左DIVの現在値はスクロールカウンターの値です。
scrollTopの値(現在値)は、スクロール操作により変化します。

DIVブロックの各要素の高さ(px)
項番jQuery API左DIV右DIV備考
scrollHeight12771277DIVブロックに入力されているテキストの高さ
innerHeight 370 - DIVブロック要素のCSS定義の高さ(height + padding-top + padding-bottom)
clientHeight - 370同上。
scrollTop(現在値)00スクロールTOP位置-値が変化します!(左、カウンター。右、自動取得。)
scrollTop(最大値)00左、scrollHeight - innerHeight。右、scrollHeight - clientHeight。
(注、ブラウザにより左右の値が多少異なることがありますが動作に問題ありません)

☆What's New!
16/10/01 animate-scrollTop
16/08/25 Fotorama thumbnail vavi
16/08/05 YouTubeダウンローダー
16/05/10 とと姉ちゃん動画カレンダー
16/05/06 とと姉ちゃん動画
16/04/27 Fancybox V2
16/03/15 Fotorama v4.6.4
15/12/01 Colorbox v1.6.3
15/11/08 Lightbox v2.8.1
15/05/24 YouTube検索
14/08/30 Lightbox v2.7.1
13/10/13 リーガルハイ2
13/10/05 ちびまる子ちやんSP
13/06/22 LOTO7 EXCEL
13/05/24 35歳の高校生
13/02/17 Lightbox v2.51
13/02/08 EdMaxメール backup
12/02/14 amcharts update
10/06/20 shadowbox
10/06/08 FLASH MP3プレーヤー
10/02/25 Pirobox
10/02/22 Lightbox
10/02/07 Mediabox
09/12/01 Urban Qee Open!
08/07/12 GDグラフPerl5.8
08/02/03 Only YouTube
07/05/13 FLASHグラフ作成4
07/04/15 FLASHグラフ作成3
07/01/30 FLASHグラフ作成2
06/08/14 FLASHグラフ作成
06/08/06 YouTubeダウンロード
05/07/09 超簡単!グラフ作成
05/06/18 超簡単!PDF作成5

05/06/06 超簡単!PDF作成4
05/05/31 アンケートシステムCGI
05/05/21 超簡単!PDF作成3
05/05/15 超簡単!PDF作成2
05/02/06 ASPアプリ自動作成
05/01/12 超簡単!PDF作成
05/01/01 リニューアルオープン


***** End of text *****

☆What's New!
16/10/01 animate-scrollTop
16/08/25 Fotorama thumbnail vavi
16/08/05 YouTubeダウンローダー
16/05/10 とと姉ちゃん動画カレンダー
16/05/06 とと姉ちゃん動画
16/04/27 Fancybox V2
16/03/15 Fotorama v4.6.4
15/12/01 Colorbox v1.6.3
15/11/08 Lightbox v2.8.1
15/05/24 YouTube検索
14/08/30 Lightbox v2.7.1
13/10/13 リーガルハイ2
13/10/05 ちびまる子ちやんSP
13/06/22 LOTO7 EXCEL
13/05/24 35歳の高校生
13/02/17 Lightbox v2.51
13/02/08 EdMaxメール backup
12/02/14 amcharts update
10/06/20 shadowbox
10/06/08 FLASH MP3プレーヤー
10/02/25 Pirobox
10/02/22 Lightbox
10/02/07 Mediabox
09/12/01 Urban Qee Open!
08/07/12 GDグラフPerl5.8
08/02/03 Only YouTube
07/05/13 FLASHグラフ作成4
07/04/15 FLASHグラフ作成3
07/01/30 FLASHグラフ作成2
06/08/14 FLASHグラフ作成
06/08/06 YouTubeダウンロード
05/07/09 超簡単!グラフ作成
05/06/18 超簡単!PDF作成5

05/06/06 超簡単!PDF作成4
05/05/31 アンケートシステムCGI
05/05/21 超簡単!PDF作成3
05/05/15 超簡単!PDF作成2
05/02/06 ASPアプリ自動作成
05/01/12 超簡単!PDF作成
05/01/01 リニューアルオープン


***** End of text *****

左DIVのCSS

#divScrollTextCont { width:300px; height:350px;
   overflow:hidden; visibility:visible;padding:10px;
   background-color:#F5F5DC;}  

右DIVのCSS

#divScrollTextCont2 {width:300px; height:350px;
    overflow:auto; visibility:visible; padding:10px; 
    background-color:#F5F5DC;}                     

jQuery aminate関数

書き方  animate(params, [duration], [easing], [callback]) 
   
   $('#divScrollTextCont').animate({scrollTop: scrollcounter}, animateTime, 'linear');
   

jQuery/JAVASCRIPT

JAVASCRIPTでは、animate(scrollTop)関数/setTimeoutメソッドの定数設定、DIVブロック要素の高さの取得、 およびanimate関数の引数設定などを行い、ボタンのマウスオーバー/アウトによるスクロール処理を実行します。

<!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- JAVASCRIPT animate(scrollTop)関連 -->  
<script type="text/javascript">

  var scrollcounter, scrollEndtop;
  var downTimer , upTimer; //setTimeout ID
  //定数設定値3つ↓(好みにより修正)
  var settimeoutSpeed =350;    //1 setTimeoutの時間=350ms毎に繰り返す(ms)
  var animateTime = 300;       //2 animateのスライドUP/DOWNの一回の動作時間=300ms、settimeoutSpeed > animateTime であること(ms)
  var scrollupdownvalue = 30;  //3 animateのスライドUP/DOWNの一回の移動量:PX値(px)

  $(document).ready(function(){

   var innerHp = $('#divScrollTextCont').innerHeight();   //表示要素(以下要素と言う)のCSS定義(height+padding paddingのデフォルト値はtop,bottomそれぞれ10px)の高さ(px)
   var scrollHp = $('#divScrollTextCont').get(0).scrollHeight;  //要素の現在の実際の高さ(px)(入力テキストの高さ)
   scrollEndtop = scrollHp-innerHp;                             //スクロール最下位置のTOPの高さ(px)(最大スクロール移動量)                        
   scrollcounter = 0;                                           //スクロール歩進カウンター(要素のスクロール位置(高さ)を示す)(px)

    /////ScrollUPボタン////////////////
    $("#up-button").on('mouseenter', function(){
      if (0 < scrollcounter) {
        ScrollUp(); //setTimeout( 'ScrollUp()' ); 
       }
      else{ scrollcounter = 0;
       } 
    });

    /////ScrollDOWNボタン////////////////
    $("#down-button").on('mouseenter', function(){
      if (scrollcounter < scrollEndtop) {
         ScrollDown(); //setTimeout( 'ScrollDown()' );
       }
      else{ 
       return false;
       } 
    });


    //中断 ScrollUP/ScrollDOWNボタン マウスアウト
    $("#up-button").on('mouseleave', function(){
      clearTimeout(upTimer);
      $("#divScrollTextCont").stop();
    });
    $("#down-button").on('mouseleave', function(){
      clearTimeout(downTimer);
      $("#divScrollTextCont").stop();
    });

 });

  //ScrollUP実行
   function ScrollUp(){
      if (0 < scrollcounter) {
         scrollcounter = scrollcounter-scrollupdownvalue;   //スクロール歩進カウンター(カウントダウン)
         $( '#scrollTopl' ).html( scrollcounter );   //デバッグ行
         $('#divScrollTextCont').animate({scrollTop: scrollcounter}, animateTime, 'linear');
         upTimer = setTimeout( 'ScrollUp()' , settimeoutSpeed); //スクロールを繰り返す
        }
      else{
         $("#scrollTopOutput").stop();
          scrollcounter = 0;
          return false;
        }
    }

   //ScrollDown実行
   function ScrollDown(){          
      if (scrollcounter < scrollEndtop) {
          scrollcounter = scrollcounter+scrollupdownvalue;    //スクロール歩進カウンター(カウントアップ)
          $( '#scrollTopl' ).html( scrollcounter );   //デバッグ行
          $('#divScrollTextCont').animate({scrollTop: scrollcounter}, animateTime, 'linear');
          downTimer = setTimeout( 'ScrollDown()' , settimeoutSpeed); //スクロールを繰り返す
        }
      else{
         $("#scrollTopOutput").stop();
          return false;
        }
    }

</script>
    

CSS/HTML

<style type="text/css">
/* animate関連 positionがrelativeの例 */
 #divScrollTextCont { width:300px; height:350px; 
     overflow:hidden; visibility:visible;padding:10px;background-color:#F5F5DC;} /*親VID */
 #divText {padding:5px} /*子VID */
 #up-button   { margin-left:150px; margin-bottom:10px; width:10px; }    /*スクロールダウンボタン ↓*/
 #down-button { margin-left:150px; margin-top:10px;    width:10px; }    /*スクロールアップボタン ↑*/

 /* animate関連 positionがabsoluteの例 5ステップ */ 
 /* #divScrollTextCont {position:absolute; left:110px; top:120px; width:300px; height:350px; 
     overflow:hidden; visibility:visible;padding:10px;background-color:#F5F5DC;}*/ /* 親DIV */
 /* #divText {position:absolute; left:0px; top:0px;padding:5px}*/   /* 子DIV */
 /* #down-button { position:absolute; left:250px; top:510px; }*/    /*スクロールダウンボタン ↓*/
 /* #up-button   { position:absolute; left:250px; top:105px; }*/    /*スクロールアップボタン ↑*/

</style>
</head>
<body>

<div id="up-button" onclick="return false;"><img src="black_up.gif"></div>
<DIV id="divScrollTextCont" class="boxShadow">
 <div id="divText"> <!-- 任意 -->
<font color=green>☆What's New!</font><br>
・・・
・・・
・・・
***** End of text *****
 </div>
</DIV>
<div id="down-button" onclick="return false;"><img src="black_down.gif"></div>

まとめ