【JavaScript入門】Webページをスクロールする方法

この記事ではWebページをスクロールする方法について解説してきます。
スクロール系のメソッドとしてはscrollBy(),scrollTo(),Scroll()の3つがあります。
一つずつ解説していきます。

scrollBy()の使い方

scrollBy(x,y)は現在のスクロール位置を基点として引数で指定した数値分スクロールします。xは横方向のスクロール量、yは縦方向のスクロール量を指定します。
以下は1秒ごとに縦に100pxずつスクロールするサンプルです。

js

setInterval(function(){
    window.scrollBy(0,100);
},1000);

scrollTo()の使い方

scrollTo(x,y)は現在のスクロール位置に関係なく、引数で指定した位置へスクロールします。xは横方向のスクロール位置、yは縦方向のスクロール位置を指定します。
以下は縦方向100pxの位置にスクロールするサンプルです。
現在のスクロール位置がどこであっても1秒後には上から100pxの位置へスクロールします。

js

setInterval(function(){
    window.scrollTo(0,100);
},1000);

scroll()の使い方

scroll(x,y)はscrollTo(x,y)と同じ機能を提供します。

js

setInterval(function(){
    window.scroll(0,100);
},1000);

スムーススクロールしたい場合

スムーススクロールしたい場合はScrollToOptionsを用いて以下のように記述します。
以下はscrollByのサンプルです。1秒ごとに100pxずつスムーススクロールします。

js

let scrollOptions = {
  left: 0,
  top: 100,
  behavior: 'smooth'
}

setInterval(function(){
    window.scrollBy(scrollOptions);
},1000);

実装サンプル

scrollTopを用いた実装サンプルです。