//スクロールを繰り返す。}</script>デモ:マウスオーバーで、DIVブロックのテキストをスクロールアップ、ダウン(スクロール)する下の左が本題のデモです。矢印アイコンをマウスオーバーしてください。右は通常の表示例です。スクロールバーで操作してください。これらのDIVブロックの要素の高さ(px)は、表のとおりです。左DIVはanimate関数、右DIVはscroll関数で操作しています。各要素の値は、jQueryで取得していまが、項番4-左DIVの現在値はスクロールカウンターの値です。scrollTopの値(現在値)は、スクロール操作により変化します。innerHeight。clientHeight。プロパティ名:変化値。スライドTOP位置px}を使用します。アニメーションの動作時間。時間ミリ秒を指定します。イージング関数名の指定。"swing"を指定します。アニメーション完了時に実行する関数を指定できます。ここでは使用しません。animate関数の引数設定などを行い、ボタンのマウスオーバー/アウトによるスクロール処理を実行します。ID:downTimer、upTimer)定数設定(変数:settimeoutSpeed、animateTime、scrollupdownvalue)DIVブロック要素の高さの取得(API:innerHeight、scrollHeight)DIVブロック要素の高さの取得は、APIで実際のテキストの高さ(scrollHeight)よよびCSS定義の高さ(innerHeight)を取得します。settimeOutメソッド発行(引数は、定数settimeoutSpeed)スクロールダウン(ScrollDown関数)スクロールの操作は、最初はスクロールダウンから始めます。スクロールダウンアイコンをマウスオーバーしてスクロールダウン関数(scrollDown())を起動します。300ms(定数animateTime)かけてスクロールカウンターの示す位置までスクロール移動します(animate関数)。つぎに、settimeOutメソッドを発行して350ms後(定数settimeoutSpeed)にスクロールダウン関数を起動します(animate関数のループ)。あること(スクロールアップも同様)。(図-1)DIVブロックページロード後の初期状態(図-2)DIVブロックページ最下位置にスクロールされた状態スクロールの停止は、(1)スクロールダウンアイコンからマウスアウトしたとき、(2)つぎの条件のときです。scrollupdownvalueスクロールアップ(ScrollUp関数)スクロールアップアイコンをマウスオーバーしてスクロールアップ関数(scrollUp())を起動します。300ms(定数animateTime)かけてスクロールカウンターの示す位置までスクロール移動します(animate関数)。つぎに、settimeOutメソッドを発行して350ms後にスクロールアップ関数を起動します(animate関数のループ)。スクロールアップの停止は、(1)スクロールアップアイコンからマウスアウトしたとき、(2)つぎの条件のときです。<!--スクロールダウンボタン-->HTMLまとめマウスオーバーで、DIVブロックのテキストをスクロールアップ、ダウンするHTMLのまとめです。ソースコードは、下のコード上をダブルクリックすると「すべて選択」の状態になり、コピーできます。このソースコードのデモを別ウィンドーで見る。最終更新日;2016.10.6。