【JavaScript】ページをスクロールさせるscrollTo()、scrollBy()の使い方

こんにちは！CODE CLUB965のKです！

今回は、JavaScriptで表示しているページをスクロールさせる方法について書こうと思います。

スクロールさせるためには、scrollTo()、scrollBy()というメソッドを使用すれば可能です。

絶対位置で指定してスクロールさせる

まず、絶対位置ですが scrollTo()というメソッドを使用します。

書き方は簡単で、第一引数に左端からの距離を指定し、第二引数に上端からの距離を指定します。

// scrollTo( x, y );
// x: 左端からの距離
// y: 上端からの距離
scrollTo( 0, 50 );

横スクロールが発生するページはあまりないので、第1引数に0を指定することが多いと思います。
なので基本的に第二引数を指定して、指定した位置までスクロールさせる感じになります。

相対位置で指定してスクロールさせる

次に相対位置ですが、 scrollBy()というメソッドを使用します。

このメソッドについては相対位置になるので、現在のスクロール位置を起点として、どれだけの距離をスクロールするかを指定します。

もちろん相対位置なので負の数を指定すれば、右方向や上方向にスクロールすることもできます。

// scrollBy( x, y );
// x: 現在位置から左方向に移動する距離
// y: 現在位置から下方向に移動する距離
scrollBy( 0, 50 ) ;

最後に

最後に今回の内容を簡単にまとめておきます。

// 絶対指定
scrollTo( x, y ) ;

// 相対指定
scrollBy( x, y ) ;

この2種類の違いを理解した上で使いましょう！

それでは、また！

Follow me!