JavaScriptでスクロールする方法【現役エンジニアが解説】

PROGRAM

今回は、JavaScriptでスクロールする方法について、絶対位置と相対位置に分け、簡単に解説していきます。

絶対位置でのスクロール

WindowのScrollToメソッドで絶対位置にスクロールできます。

WindowのScrollToメソッドでは、第一引数にx座標、第二引数にy座標を指定します。

scrollTo(0, 0);

上記のコードでは、WindowのScrollToメソッドを使って、x座標0、y座標0の位置にスクロールしています。

相対位置でのスクロール

WindowのScrollByメソッドを使うと相対位置にスクロール可能です。

WindowのScrollByメソッドに関しても、第一引数にx座標、第二引数にy座標を指定します。

scrollBy(100, 200);

上記のコードでは、WindowのScrollByメソッドを使い、現在の位置からx座標100、y座標200を加算した位置にスクロールしています。

プロパティでスクロール

ElementのプロパティであるScrollTopやscrollLeftの操作でもスクロールすることが可能です。

ある要素のx座標のスクロールはElementのScrollTopを、y座標のスクロールはElementのScrollLeftを操作します。

document.body.scrollTop = 0;
document.body.scrollLeft = 0;

上記のコードでは、ElementのプロパティであるScrollTopやscrollLeftを使用し、bodyのx座標0、y座標0の位置にスクロールしています。