親バカエンジニアのナレッジ帳

webのエンジニアをやっており、日頃の開発で詰まったことや書き残しておきたいことを載せています。育児のイロハという育児サイト(https://ikujip.jp)の開発も行っているため、その開発で使用されている技術についても掲載しています。

WEBページを自動スクロールさせて、画像をゆっくり見たい!

今回の記事は、非プログラマー向けの記事になります。
WEBページを開いた時に、画面を自動スクロールしたい時はありませんか?
例えば写真が一覧で表示されるギャラリーページなど、どこまで続いているのかわからないページでは、手動で一番下までスクロールさせるのが面倒な時ありますよね。

一例として、googleの画像ページで、「本」と検索した後のページとかがそうです。
本 - Google 検索

ブラウザ毎に自動スクロールさせるような便利なプラグインがあるかもしれませんが、ツールを使わずともJavascriptという技術で簡単にスクロールさせる方法があります。
若干プログラムを使うわけですが、ページ内の下部に掲載してあるコードをそのままコピペすればいいだけなので、プログラミングのことがわからない人でも大丈夫です!

今回はGoogle ChromeYahoo!JAPANのページ(http://www.yahoo.co.jp)をスクロールさせた時を例にしてやってみました。
他のブラウザでもだいたいやり方は同じです。

まず、Chromeでページを開いた時に右クリックをすると、以下の画面が出てきます。
ここで「検証」を選択してください。

f:id:tomotomo1129:20180508082817j:plain

すると、画面の下に以下のように出てくるものがあります。

f:id:tomotomo1129:20180508082925j:plain

そこで、上記のように「Console」というタブが開かれた状態になっていれば問題ないですが、
もし「Console」が開かれていない場合は、
以下のように「×」の左の「・」が3つ並んでいるボタンを押下し、「Dock Side」で真ん中を選んでください。

f:id:tomotomo1129:20180508082959j:plain

あとは以下の文を「Console」の箇所に貼り付け、キーボードの「Enter」ボタンを押せばOKです。

var speed = 1; //時間あたりに移動するpx量です。デフォルトでは1pxにしていますが、自由に変えてください
var interval = 100; //移動する間隔です。デフォルトでは0.1秒おきにしていますが、自由に変えてください
var scrollTop = document.body.scrollTop;
setInterval(function() {
    var scroll = scrollTop + speed;
    window.scrollBy(0, scroll)
},interval);

f:id:tomotomo1129:20180508083332j:plain

するとススススス...と、画面が少しずつ下に向かってスクロールしていくことがわかると思います。
speedやintervalの値を変えたりして、色々試してみてください。
スクロールの動きを止めたくなった場合は、以下の一文を入れて「Enter」を押してもらえれば大丈夫です。

clearInterval(scroll);

非常に簡単ですね。
先ほど例に挙げた、googleの画像ページ以外でもどのページでも可能ですので、
色々なページで試して、コーヒーでも飲みながら画面がゆっくりスクロールしていく様子を見てもらえればと思います。

一応非技術者向けの記事としていますが、
もちろんフロントエンジニアがJavascriptを使ってページ内でスクロールの動きを実現したい時、上にあるコードを貼り付ければ実現することができます。