【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を用いた実装サンプルです。

2021年5月17日 【JavaScript入門】a要素クリック時に指定した要素までスムーススクロールする方法

以上で記事の解説はお終い！

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！

【Udemy厳選】2023年HTML、CSS、JavaScriptで人気のオススメ動画コース13選