【javascript/jQuery】強制的にページをスクロールさせる方法

公開日: : JavaScript/jQuery

スポンサーリンク

強制的にページをスクロールさせたいと思って調べていたのですが、なかなか思うようなものが見つからず困っていました。ページのスクロールというのはこのページに(恐らく)出ているような赤い部分にマウスをのせると勝手に下にスクロールするみたいなやつです。

似たようなワードで調べるとjQueryのアニメーションとかを用いてトップに自動でスクロールする系のものが多く、単純にスクリプトでスクロールするにはどうしたらいいか結構迷いました。

結論から書くと単純にスクロールさせるにはjQueryなんか必要なくて

window.scrollBy(0,50);

などとするだけでできます。

window.scrollByメソッドは第一引数がX軸(横)の移動量、第二引数がY軸(縦)の移動量となっています。引数の値が正の場合それぞれ右と下に移動するようになっており、上の例ですと一回呼ばれる度に下に50だけスクロールします。

デモ

デモといっても下部に表示されている(であろう)ものです。
ソースを置いておきます。ID名がscrollareaというのが赤い部分で、そこにマウスカーソルをのせるとsetIntervalでscrollByを連続的に呼び出して下スクロールが開始され、はずすとclearIntervalで停止するようになっています。

speedという変数でスクロール量を変更できるようにしています。(もちろんsetIntervalの時間間隔でもいじれる)

$(function(){
    var speed = 4;
    var timer ;
    $("#scrollarea").hover(
        function(){
            timer = setInterval(function(){
                window.scrollBy(0,speed);
            },20);
        },
        function(){
            clearInterval(timer);
        }
    );
});
ここにマウスをのせると下スクロール開始

スポンサーリンク
Amazon
  • このエントリーをはてなブックマークに追加

関連記事

【jQuery UI】タブの初期状態を選択するとエラーがでて失敗する

jQuery UIでタブをプログラム側から選択させるには以下のようなコードを書けばいい…といったこと

記事を読む

jQueryで要素にappendとafterを使って追加する

jqueryのappendは要素の末尾に指定要素を追加し、afterは要素の後に指定要素を加えます。

記事を読む

【javascript】RSSを読み込んで表示させる【Google Feed API】

jQueryで簡単にRSSフィードを表示させる方法としてGoogleFeedAPIを利用するというの

記事を読む

YoutubeのURLリンクを外部プレイヤーのものに正規表現で置換する

Youtubeのアドレスを正規表現を使って抽出して外部プレイヤーのフレームに変換・置換するスクリプト

記事を読む

Google Maps JavaScript API v3でマップ上に線を引く

GoogleMapsAPIを使って地図上に線を引いたときに気を付けたことなどをメモしておきます。

記事を読む

【3DCG・MMD】カメラレンズによる見え方シミュレータ作成について

カメラのレンズが違うことでどのくらい出来上がる写真に差が出てくるのかを確かめることのできるシミュレー

記事を読む

【Three.js/jThree.js】カメラ内部パラメータを変更して視野などを変える

jThree.jsでカメラの内部パラメータを変更するのに手間取ったのでメモ。参考にしているjThre

記事を読む

ニコニコ動画のURLリンクから外部プレイヤーのスクリプトに正規表現で置換する

ニコニコ動画の動画のアドレスを抽出して外部プレイヤー貼りつけソースのスクリプトに変換するソースです。

記事を読む

jQueryのカラーピッカーライブラリFarbtastic Color Pickerを使う

.farbtastic .wheel { background: url(http://mem

記事を読む

【javascript/jQuery】Progressbarで処理の進捗状況を表示する

jQuery UIでProgressbarを使う 処理経過を表示する場合プログレスバーにより提示さ

記事を読む

【Laravel5】既存のDBからデータを取得して表示する

はじめに 今まで作ったWebサイトをLaravel5で見れるようにし

【C++/OpenCV】cv::Matの画像にインパルスノイズを付加する

OpenCVで画像にノイズを付け足したいと思って調べたところ、Pyth

Intel Corei7-7700TでHTC Viveの動作確認

はじめに HTC ViveというVRヘッドセットで遊んでみたのでその

【Python】フォルダ内のカッコ付き数字ファイルを一括でリネームするスクリプト

はじめに タイトルどおりなのですが、指定フォルダ内のファイルのファイ

OpenCV3.1のTracking APIでトラッキングを試す

はじめに 先日OpenCV3.1をopencv_contrib付きで

パソコンを複数台使う際便利なツール

はじめに 先日、機械学習用にGPUを積んだBTOパソコンを購入しまし

OpenCV3.1をopencv_contrib付きでVisual Studio2013でビルドしてインストールする

はじめに OpenCV3.1でトラッキングがしたいと思いインストーラ

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑