【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);
        }
    );
});
ここにマウスをのせると下スクロール開始

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

関連記事

WordPressサイトのSSL対応(HTTPS化)手順のまとめ【さくらサーバー】

先週頃にこのサイトをSSL対応しましたのでその流れについてまとめておき

【Google Charts】動的にグラフを更新する方法

はじめに Webサイト上でグラフを描こうと思った場合、いくつかのJa

体重変化量計算シミュレータ【ダイエット/肥満】

ツール本体 入力 カロリー入力 1日の余剰摂取/消費カロリー

おサイフケータイ対応ストレージ32GBのSIMフリースマホまとめ【2017年秋版】

はじめに SIMフリーの格安スマホのおサイフケータイ機能付きのもので

リクルート期間限定ポイントの有効な使い道

はじめに  先日クレジットカードの見直し活動の一環でポイント還元率の

初心者がお金を貯めるための節約・財テク手法まとめ【ポイント還元・投資・税金対策】

はじめに  最近なるべく節約しようと思い、お金周りに関して色々調べて

動画講座を効率的にキャプチャして復習する方法

はじめに  最近、動画媒体の講座などをたまに視聴しています。独学だと

→もっと見る

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