【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
  • このエントリーをはてなブックマークに追加

関連記事

Canvasの画像をリサイズする簡単な方法【HTML5・javascript】

調べてみるとCanvasをリサイズするようなjavascriptの関数は存在しないようなので自前で作

記事を読む

チェスボード画像自動生成ツール

1マスのサイズ(ピクセル) マスの数× 左上が白 枠をつけるか 枠の色白黒

記事を読む

AAアニメーション

javascriptでAAアニメーションしました。AAは以下のところから参照しました。(AAアニメー

記事を読む

【jQuery】大量の画像で重くなったページを遅延ロードで軽くする方法【Lazy Load】

画像をふんだんに使っているページでは読み込みの際に非常に時間がかかるという問題点があります。数枚なら

記事を読む

PHPでページリロードをしようと思ったができなかったので

header("Location: ".$_SERVER); とすればページをリロードでき

記事を読む

tableデータから棒グラフを描画できるjQueryプラグインTableBarChartを使ってみる

グラフを作成することについて 既存のtableデータから簡単に棒グラフの作成できるTableBar

記事を読む

【jQuery】クリックイベントでマウスホイールクリックを検知する

$("a").click(function(){ … }); によりクリックイベントを関連付け

記事を読む

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

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

記事を読む

jQueryにおけるcreateElement

jQueryでcreateElementに変わる関数は単純で、例えばvar dom = docume

記事を読む

jThree.jsやThree.jsでcanvasの画面をキャプチャして画像にする方法

WebGLのライブラリであるThree.jsやそのラッパーライブラリのjThree.jsでcanva

記事を読む

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

格安プラン限定レンタルサーバー機能比較表(2016年)

はじめに  最近新しい共用サーバーをレンタルしようと思い調査およびそ

kindle unlimitedが便利だったのでお勧めの使い方など感想メモ

 kindle unlimitedというサービスが8/3からAmazo

→もっと見る

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