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値は１例）
  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関数で操作しています。
各要素の値は、ｊQueryで取得していまが、項番４-左DIVの現在値はスクロールカウンターの値です。
scrollTopの値（現在値）は、スクロール操作により変化します。

表-１ DIVブロックの各要素の高さ(px)

項番	jQuery API	左DIV	右DIV	備考
１	scrollHeight	1277	1277	DIVブロックに入力されているテキストの高さ
２	innerHeight	370	-	DIVブロック要素のCSS定義の高さ(height + padding-top + padding-bottom)
３	clientHeight	-	370	同上。
４	scrollTop（現在値）	0	0	スクロールTOP位置-値が変化します！（左、カウンター。右、自動取得。）
５	scrollTop（最大値）	0	0	左、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 リーガルハイ２ ・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 リーガルハイ２ ・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])　

• params ； 変化させたい要素の プロパティ名:変化値。ここでは {scrollTop: スライドTOP位置px}を使用します。
• duration ； アニメーションの動作時間。 "slow", "normal", "fast" または時間ミリ秒を指定します。
• easing ； イージング関数名の指定。 "linear"または "swing"を指定します。
• callback ； アニメーション完了時に実行する関数を指定できます。ここでは使用しません。

例

   
   $('#divScrollTextCont').animate({scrollTop: scrollcounter}, animateTime, 'linear');
   

jQuery/JAVASCRIPT

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

• 定数設定（setTimeout ID：downTimer、upTimer）
• 定数設定（変数：settimeoutSpeed、animateTime、scrollupdownvalue）
• DIVブロック要素の高さの取得（API：innerHeight、scrollHeight）
  DIVブロック要素の高さの取得は、APIで実際のテキストの高さ（scrollHeight）よよびCSS定義の高さ（innerHeight）を取得します。
• animate(scrollTop)関数実行（引数は、変数scrollcounter　定数animateTime）および settimeOutメソッド発行（引数は、定数settimeoutSpeed）

  1. スクロールダウン（ScrollDown関数）
     スクロールの操作は、最初はスクロールダウンから始めます。
     スクロールダウンアイコンをマウスオーバーしてスクロールダウン関数（scrollDown()）を起動します。
     スクロールダウン関数は、スクロールTop位置を30px（定数scrollupdownvalue）づつカウントアップ（スクロールカウンター：変数scrollcounter）し、 300ms（定数animateTime）かけてスクロールカウンターの示す位置までスクロール移動します（animate関数）。
     つぎに、settimeOutメソッドを発行して350ms後（定数settimeoutSpeed）にスクロールダウン関数を起動します（animate関数のループ）。
     なお、settimeoutSpeed > animateTime であること（スクロールアップも同様）。
     
     

     （図-１）DIVブロックページロード後の初期状態

     （図-２）DIVブロックページ最下位置にスクロールされた状態

     
     スクロールの停止は、(1)スクロールダウンアイコンからマウスアウトしたとき、(2)つぎの条件のときです。
     (2)の条件は、scrollcounter < scrollEndtop のとき。
     ただし、 scrollEndtop = scrollHeight - innerHeight (図-２参照）、
     scrollcounter = scrollcounter + scrollupdownvalue

  2. スクロールアップ（ScrollUp関数）
     スクロールアップアイコンをマウスオーバーしてスクロールアップ関数（scrollUp()）を起動します。
     スクロールアップ関数は、スクロールTop位置を30px（定数scrollupdownvalue）づつカウントダウン（スクロールカウンター：変数scrollcounter）し、 300ms（定数animateTime）かけてスクロールカウンターの示す位置までスクロール移動します（animate関数）。
     つぎに、settimeOutメソッドを発行して350ms後にスクロールアップ関数を起動します（animate関数のループ）。

     スクロールアップの停止は、(1)スクロールアップアイコンからマウスアウトしたとき、(2)つぎの条件のときです。
     (2)の条件は、0 < scrollcounter のとき。 (図-１参照）、ただし、scrollcounter = scrollcounter - scrollupdownvalue

jQuery/JAVASCRIPT

<!-- 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
  //定数設定値３つ↓（好みにより修正）
  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> <!--スクロールダウンボタン-->

HTMLまとめ

マウスオーバーで、DIVブロックのテキストをスクロールアップ、ダウンするHTMLのまとめです。
ソースコードは、下のコード上をダブルクリックすると「すべて選択」の状態になり、コピーできます。
このソースコードのデモを別ウィンドーで見る。

<html>
<head>
<title>jQuery animate関数（scrollTopプロパティ）を使用して、マウスオーバーで、DIVブロックのテキストをスクロールアップ、ダウンする</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- 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
  //定数設定値３つ↓（好みにより修正）
  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>
<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>
<style>
/* 本ページ用 CSS */
 body {
	max-width: 800px;
	margin: 0;
        padding-left: 5px; padding-top: 0px; background:#dcdcdc;
  }
 h2 {font-family: "ＭＳ ゴシック",sans-serif; color:#000000}
 body,DIV,pre{ color: #333; font: 14px 'Lucida Grande', Verdana, sans-serif;
  }
</style>

</head>
<body>
<h3 style="margin-top:10px">マウスオーバーで、DIVブロックのテキストをスクロールアップ、ダウン（スクロール）する - デモ</h3>
<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>
<pre>
国内
台風は温帯低気圧に 暴風警戒new
豊洲 石原氏がヒアリング拒否写真new
福島事故費 東電に再編要請へ写真new
自民、総裁任期を延長へ写真
令状なしのGPS捜査 大法廷へ
新国立維持費 年24億円に減少写真
強姦再審で無罪 男性が国提訴
将棋棋士 対局室にスマホ禁止写真

国際
次期国連総長 グテレス氏確実写真new
釜山映画祭 4団体が参加拒否写真new
台風 韓国ではマンション浸水写真
北方四島の帰属譲らず ロシアnew
中国信託幹部らを起訴 台湾写真
香港デモ元リーダー拘束 タイ写真
内戦の日々ツイート 7歳少女写真
玩具かと爆弾拾い死亡 シリア写真
.
経済
富士通レノボ PC事業統合へnew
ホンダとヤマハ発 協調路線に写真new
ローソン 18年に銀行業参入へnew
日立 非中核2事業の売却検討
北海道漁獲 初の100万t割れへ写真
イオン 53億円の最終赤字
サーフィンライフ 出版社破産写真
バスタで渋滞悪化 公表せず写真

エンタメ
V6三宅 リオパラで得た違和感写真new
紅白司会 あさイチコンビ濃厚写真new
「スリラー」作者 音楽P死去写真new
長谷川豊アナ 全番組降板に写真
20kg増 松ケンの壮絶役作り写真
「PPAP」ネット席巻の理由写真
日テレ ドラマ一部を生放送写真
三太郎CM好感度で無傷の快挙写真

スポーツ
亀田和毅が移籍 日本復帰へ写真new
Gクルーズ「間違っていた」写真new
ハリル 背水イラク戦ピリピリ写真new
イチロー 来季もマーリンズ写真
棄権の錦織 まだ信じられない写真
金本監督 反省の多いシーズン写真
戦力外選手 新天地での復活劇写真
FIFA ファン違反で11カ国罰金写真

・・・
・・・
***** End of text *****
</pre>
 </div>
</DIV>
<div id="down-button" onclick="return false;"><img src="black_down.gif"></div>

</body>
</html>
 

　最終更新日；2016.10.6 初版