【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/javascript】はてなボタンを動的に設置する

はてなブックマークのボタンをページの読み込みが終わった後にjavascript(jQuery)で追加

記事を読む

【jQuery UI】Sliderのオプション変更やイベントを取得をする方法

jQuery UIを使ってスライダー(トラックバー)を作ります。その際に起こるイベントとしてスライダ

記事を読む

【javascript/jQuery】JSON形式のデータの表示確認をする

PHPであれば「var_dump」や「print_r」などでJSON形式のデータの中身が思い通りの者

記事を読む

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

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

記事を読む

【Javascript】1つまたは複数のランダムな値を取得する

#shuffle1btn,#shuffle2btn{ padding: 4px 6px; }

記事を読む

スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。 下記2点の設定が必要です。

記事を読む

monacaでWebサイトをアプリ化

monacaを使ってWebサイトをアプリ化するための叩き台としてのメモです。 Webサイトのア

記事を読む

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

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

記事を読む

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

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

記事を読む

【ImgToAA】画像をAA化するツール

指定の画像を読み込ませてAA化するツールです。サンプルはこちら。 (使い方) 画像ファイ

記事を読む

Windowsユーザが初めてMacBookを購入したときの注意点や感想

最近12インチのMacBookを購入しました。今までWindowsしか

Redmine3.2をUbuntu14.04にインストールして躓いた所についてメモ

はじめに Ubuntu14.04 ServerにRedmine3.2

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

【PHP】headerでContent-Typeを指定したのに効かない場合の対処法

PHPでサイトマップを作ろうと思い、XML形式のファイルを出力しようと

スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。

【PHP】特定のURLからそのAtomやRSSのフィードを抽出する方法

特定のURLからRSSやATOMのフィードを抽出する方法をメモ。 流

フィード抽出ツール(RSS1.0、RSS2.0、atom)

任意URL サイト名 サイトURL RSS1.0

→もっと見る

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