「jQuery animate関数（scrollTopプロパティ） を使って、
ボタンのマウスオーバーで、DIVブロックのテキストをスクロールアップ、ダウンする」
および 「jQuery animate関数（heightプロパティ） を使って、
ボタンのクリックで、DIVブロックの高さを変更しoverflowの隠れているテキストを表示する」
の２つの機能を合せてカスタマイズする。

jQuery animate関数を使ってつぎの２つの機能を合せてカスタマイズします。

1. animate関数（scrollTopプロパティ） を使用して、アップ、ダウンボタンのマウスオーバーで、DIVブロックのテキストをスクロールアップ、ダウン（自動スクロール）する 。 (アイコンは、 を使用）
2. animate関数（heightプロパティ） を使って、ボタンのクリックで、DIVブロックの高さを変更しoverflowの隠れているテキストを全表示する。 (アイコンは、 を使用）

1. 本来のスクロールバーの操作でスクロール（ブラウザ標準機能)
2. アップ、ダウンボタンのマウスオーバーで自動スクロール（jQuery）
3. キーボードの↑↓矢印キーの押下でスクロール（ブラウザ標準機能)

デモ：jQueryでanimate関数を使って、アップ、ダウンボタンのマウスオーバーで、DIVブロックのテキストをスクロールアップ、ダウンするなど。

ここのデモでは、４つの動作機能を確認することができます。

1. 本来のスクロールバーの操作でスクロール（ブラウザ標準機能)
2. キーボードの↑↓矢印キーの押下でスクロール（ブラウザ標準機能。DIVブロック上をクリックしてから使用。)
3. アップ、ダウンボタンのマウスオーバーで自動スクロール (アイコンは、 　jQuery使用）
4. 開く閉じるボタンのクリックで、DIVブロックの高さを変更しoverflowの隠れているテキストを全表示する(アイコンは、 　jQuery使用）

  デ モ  

☆What's New！ 国内 台風は温帯低気圧に 暴風警戒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 ***** ※キーボードの↑↓矢印キーの押下でスクロール操作の方法 DIVブロック内をクリックしてから矢印キーを操作してください。

◆左DIVの高さの動的属性（px）（デモの操作により値は変化します） スクロール歩進カウンター：0（animate(scrollTop)関数の設定値） ※カウンターは、 pxづつアップ、ダウンします（変更可） DIVのスクロールバーの現在の位置（scrollTop Max:)：0 BODYのスクロールバーの現在の位置（scrollTOP）：0 ◆左DIVの高さの静的属性（px）（CSS定義） scrollHeight：（テキスト全体の高さ） scrollTop： （スクロールの最大の高さ = scrollHeight - innerHeight） height：（CSS定義 height値） innerHeight：（CSS定義 height値 + padding値 ） offsettop：　Y! 　　図：DIVブロックの構成

HTML/JAVASCRIPT/CSSなどソースコードおよびjQueryファイル

JAVASCRIPT/jQuery

本ページは、以下の２つの機能についてカスタマイズしています。２つの機能の詳細なカスタマイズ方法については、それぞれのリンク先を参照してください。

（２つの機能）
1. アップ、ダウンボタンのマウスオーバーで自動スクロール ( ）>カスタマイズ
2. 開く閉じるボタンのクリックで、DIVブロックの高さを変更しoverflowの隠れているテキストを全表示する( ）>カスタマイズ

アップ、ダウンボタンのマウスオーバーで自動スクロールは、jQuery animate(scrollTop)関数を使います（(1)のソースコード）。

• animate(scrollTop)関数
  
  $('#divScrollTextCont').animate({scrollTop: スクロール位置px}, 動作時間ms, 'linear');
  
  ”スクロール位置px”は、DIVブロックのスクロール位置(変数 scrollcounter)で、”動作時間ms”は、スクロールの動作時間(変数 animateTime)です。 変数 scrollcounterは、スクロール歩進カウンターで定数30px（変数 scrollupdownvalue）づつカウントアップ／ ダウンさせます。変数 animateTimeは、定数300msを設定しています。
  スクロールはアップ、ダウンボタンをマウスオーバーすると、1回のanimate(scrollTop)関数で30pxづつ300msかけて移動し、この 動作を、setTimeout()メソッドで350ms（変数 settimeoutSpeed）ごとにループさせて、アップ、ダウンボタンのマウスアウトで終了でします。
• scroll()関数
  スクロール操作において、ブラウザ標準機能のスクロールの「スクロールバーの操作でスクロール」や「キーボードの↑↓矢印キーの押下でスクロール」を行った 場合、jQuery scroll()関数を使ってスクロールの位置(scrollTop)を常に、スクロール歩進カウンター（変数 scrollcounter）に設定します。 こうすることによって、「スクロールバーの操作」から「アップ、ダウンボタンのマウスオーバーで自動スクロール」へ移っても、前の操作で止まった位置からスクロールがスムースに連続して行えます。 (上のデモで確認できます）
  

   $('#divScrollTextCont').scroll(function(){
        if( scrollFlag == true ){ scrollcounter = $(this).scrollTop(); } //スクロールバー操作によるスクロール位置の取得
     }); 
        // scrollFlag ：trueは「スクロールバーの操作でスクロール」や「キーボードの↑↓矢印キーの押下でスクロール」の場合
           

開く閉じるボタンのクリックで、DIVブロックの高さを変更しoverflowの隠れているテキストを全表示するは、animate(height）関数を使います（(2)のソースコード）。

• animate(height）関数
  
  $( '#divScrollTextCont' ).animate( { height: DIVブロックの高さpx }, { duration: 'slow' } );
  
  heightプロパティのDIVブロックの高さpxの値を設定することにより、DIVブロックの表示する高さを変えることができます。 overflowの隠れているテキストを全表示するときは、テキストの全体の高さ（scrollHeight)を指定し、元に戻すときは、CSS定義の高さ（height）指定します。 （上の図：DIVブロックの構成参照）

ソースコード；

　(1) ボタンマウスオーバーで自動スクロール   　(2) オーバーフロー部分も含めテキストを全表示する  

<!--　 (1)のソースコード -->

<!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- メイン関数 -->
<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）(入力テキストの高さ）
   var scrollFlag = true;   //スクロールバー操作フラグ true：スクロールバー操作
   scrollEndtop = scrollHp-innerHp;                             //スクロール最下位置のTOPの高さ（px）（最大スクロール移動量）                        
   scrollcounter = 0;                                           //スクロール歩進カウンター(要素のスクロール位置（高さ）を示す)（px）

   // ScrollUPボタン マウスオーバー ////////////////
    $("#up-button").on('mouseenter', function(){
      if (-scrollupdownvalue < scrollcounter) {
        scrollFlag = false;
        ScrollUp(); //setTimeout( 'ScrollUp()' ); 
       }
      else{ scrollcounter = 0; scrollFlag = true;
       } 
    });

   // ScrollDOWNボタン マウスオーバー ////////////////
    $("#down-button").on('mouseenter', function(){
      if (scrollcounter < scrollEndtop+scrollupdownvalue) {
         scrollFlag = false;
         ScrollDown(); //setTimeout( 'ScrollDown()' );
       }
      else{ 
        scrollFlag = true;
        return false;
       } 
    });


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

 // DIVスクロール位置(scrollTop)の取得：scroll関数  ///////////////////
    $('#divScrollTextCont').scroll(function(){
      if( scrollFlag == true){ scrollcounter = $(this).scrollTop(); }
    });

 });  // メイン$(document).ready(function()のEND

 // 外部関数 ScrollUP関数/ScrollDown関数 /////////////////////
  //ScrollUP実行
   function ScrollUp(){
      if (-scrollupdownvalue < scrollcounter) {
         scrollcounter = scrollcounter-scrollupdownvalue;   //スクロール歩進カウンター（カウントダウン）
         $('#divScrollTextCont').animate({scrollTop: scrollcounter}, animateTime, 'linear');
         upTimer = setTimeout( 'ScrollUp()' , settimeoutSpeed); //スクロールを繰り返す
        }
      else{
         $("#divScrollTextCont").stop();
         scrollcounter = 0;
         return false;
        }
    }

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

</script>

<!--　 (2)のソースコード -->

<script type="text/javascript">
 $(document).ready( function() {
   var flag = true;
   var divBlockscrollHeight = $( '#divScrollTextCont' ).get(0).scrollHeight; // テキストの全体の高さ
   var divBlockHeight = $( '#divScrollTextCont' ).height(); // DIVブロック CSS定義の高さ paddingを除く
 
   $( '#opencloseButton' ).click( function() {
       if( flag ){  //開く
          flag = false;
          $( '#divScrollTextCont' ).animate( { height: divBlockscrollHeight}, 
              { duration: 'slow' } );                        // テキストの全体の表示
          $(this).attr( {'src': 'img/height-close.gif' , 'title': '閉じる' }); //閉じるボタンに変更
       }else{  //閉じる
          flag = true;
          $( '#divScrollTextCont' ).animate( { height: divBlockHeight },
              { duration: 'slow' } );                        // 元に戻す
          $(this).attr( { 'src': 'img/height-open.gif' , 'title': '開く - 全体表示' }); //開くボタンに変更
       }
   });
 });
</script>

CSS

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

</style>
 

HTML

４つのアイコン画像を使用しています。

1. アップ、ダウンボタンのマウスオーバーで、DIVブロックのテキストをスクロールアップ、ダウンするアイコン
   （black_up.gif　スクロールアップ）
   （black_down.gif　スクロールダウン）
2. ボタンのクリックで、DIVブロックの高さを変更しoverflowの隠れているテキストを全表示するアイコン
   （height-open.gif　開く-全体表示）
   （height-close.gif　閉る-元に戻す）

<div id="up-button" onclick="return false;" style="float: left;"><img src="black_up.gif">
</div>
<div id="divopencloseButton"  style="float: left;">
  <img src="img/height-open.gif" id="opencloseButton" title="開く - 全体表示">
</div>
<div  style="clear: both;"></div>

<DIV id="divScrollTextCont" class="boxShadow"> <!-- 対象のDIVブロック  -->
 <div id="divText"> <!-- 任意 -->
<font color=green>☆What's New！</font><br>
<pre>
国内
台風は温帯低気圧に 暴風警戒new
豊洲 石原氏がヒアリング拒否写真new
福島事故費 東電に再編要請へ写真new
自民、総裁任期を延長へ写真
令状なしのGPS捜査 大法廷へ
新国立維持費 年24億円に減少写真
強姦再審で無罪 男性が国提訴
将棋棋士 対局室にスマホ禁止写真

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

まとめ

ソースコードをまとめました。このソースコードのデモを別ウィンドウで見る。

<html>
<head>
<title>デモ～「ボタンのマウスオーバーで、DIVブロックのテキストをスクロールアップ、ダウンする」と
「ボタンのクリックで、DIVブロックの高さを変更しoverflowの隠れているテキストを表示する」を併用する 
</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>

<!-- メイン関数 -->
<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）(入力テキストの高さ）
   var scrollFlag = true;   //スクロールバー操作フラグ true：スクロールバー操作
   scrollEndtop = scrollHp-innerHp;                             //スクロール最下位置のTOPの高さ（px）（最大スクロール移動量）                        
   scrollcounter = 0;                                           //スクロール歩進カウンター(要素のスクロール位置（高さ）を示す)（px）

   // ScrollUPボタン マウスオーバー ////////////////
    $("#up-button").on('mouseenter', function(){
      if (-scrollupdownvalue < scrollcounter) {
        scrollFlag = false;
        ScrollUp(); //setTimeout( 'ScrollUp()' ); 
       }
      else{ scrollcounter = 0; scrollFlag = true;
       } 
    });

   // ScrollDOWNボタン マウスオーバー ////////////////
    $("#down-button").on('mouseenter', function(){
      if (scrollcounter < scrollEndtop+scrollupdownvalue) {
         scrollFlag = false;
         ScrollDown(); //setTimeout( 'ScrollDown()' );
       }
      else{ 
        scrollFlag = true;
        return false;
       } 
    });

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

 // DIVスクロール位置(scrollTop)の取得：scroll関数  ///////////////////
    $('#divScrollTextCont').scroll(function(){
      if( scrollFlag == true){ scrollcounter = $(this).scrollTop(); }
    });

 });  // メイン$(document).ready(function()のEND

 // 外部関数 ScrollUP関数/ScrollDown関数 /////////////////////
  //ScrollUP実行
   function ScrollUp(){
      if (-scrollupdownvalue < scrollcounter) {
         scrollcounter = scrollcounter-scrollupdownvalue;   //スクロール歩進カウンター（カウントダウン）
         $('#divScrollTextCont').animate({scrollTop: scrollcounter}, animateTime, 'linear');
         upTimer = setTimeout( 'ScrollUp()' , settimeoutSpeed); //スクロールを繰り返す
        }
      else{
         $("#divScrollTextCont").stop();
         scrollcounter = 0;
         return false;
        }
    }

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

</script>

<!-- animate関数（heightプロパティ） -->
<script type="text/javascript">
$(document).ready( function() {
   var flag = true;
   var divBlockscrollHeight = $( '#divScrollTextCont' ).get(0).scrollHeight; // テキストの全体の高さ
   var divBlockHeight = $( '#divScrollTextCont' ).height(); // DIVブロック CSS定義の高さ paddingを除く
 
   $( '#opencloseButton' ).click( function() {
       if( flag ){  //開く
          flag = false;
          $( '#divScrollTextCont' ).animate( { height: divBlockscrollHeight},
              { duration: 'slow' } );
          $(this).attr( {'src': 'img/height-close.gif' , 'title': '閉じる' }); //閉じるボタンに変更
       }else{  //閉じる
          flag = true;
          $( '#divScrollTextCont' ).animate( { height: divBlockHeight },
              { duration: 'slow' } );
          $(this).attr( { 'src': 'img/height-open.gif' , 'title': '開く - 全体表示' }); //開くボタンに変更
       }
   });
});
</script>

<style type="text/css">
/* animate関連 positionがrelativeの例 */
 #divScrollTextCont { width:300px; height:350px; 
     overflow:auto; visibility:visible;padding:10px;background-color:#F5F5DC;} /*親VID */
 #divText {padding:5px} /*子VID */
 #up-button   { margin-left:150px; margin-bottom:0px; width:10px; }    /*スクロールダウンボタン　↓*/
 #down-button { margin-left:150px; margin-top:10px;    width:10px; }    /*スクロールアップボタン　↑*/
 #divopencloseButton   { margin-left:5px; margin-bottom:10px; width:10px; } /* DIV要素の高さ変更ボタン */
</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,table,td{ color: #333; font: 14px 'Lucida Grande', Verdana, sans-serif;
  }
 /*  LIタグで横並び    */
 UL.lilist li {
	    float: left;
	    list-style-type: none;
   }
 UL.lilist { zoom:1;  overflow: hidden;} /* 横並びの ClearHack */

 div.boxShadow {
	-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    }   /*親DIVブロックに影を付ける*/
</style>


</head>
<body>
<h3 style="margin-top:10px;text-align:center">
「ボタンのマウスオーバーで、DIVブロックのテキストをスクロールアップ、ダウンする」および<br>
「ボタンのクリックで、DIVブロックの高さを変更しoverflowの隠れているテキストを表示する」<br>を併用する - デモ</h3>
<div id="up-button" onclick="return false;" style="float: left;"><img src="black_up.gif">
</div>
<div id="divopencloseButton"  style="float: left;">
  <img src="img/height-open.gif" id="opencloseButton" title="開く - 全体表示">
</div>
<div  style="clear: both;"></div>
 
<DIV id="divScrollTextCont" class="boxShadow">
 <div id="divText"> <!-- 任意 -->
<font color=green>☆What's New！</font><br>
<pre>
国内
台風は温帯低気圧に 暴風警戒new
豊洲 石原氏がヒアリング拒否写真new
福島事故費 東電に再編要請へ写真new
自民、総裁任期を延長へ写真
令状なしのGPS捜査 大法廷へ
新国立維持費 年24億円に減少写真
強姦再審で無罪 男性が国提訴
将棋棋士 対局室にスマホ禁止写真

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

</body>
</html>
 

  最終更新日；2016.10.6 初版