【初心者OK】JavaScriptでスクロール位置を取得、操作する方法

サイト制作やアプリ開発でスクロールに関するアニメーションはよく登場します。

初学者の方やWebデザイナーにとっては、なんだか難しく見えるかもしれません。

JavaScriptでスクロールを扱うには「位置」だけを考えておけば勝ったも同然ですので、スクロール位置に関する簡単な操作方法を紹介していきます。

また動画もあるので適時使ってください。

JavaScriptでスクロール位置を取得する方法

早速ですがJavaScriptでは以下のようにしてブラウザのスクロール位置を確認できます。

const w = window.scrollX;
const h = window.scrollY;
console.log(w); // 横方向のスクロール位置
console.log(h);　// 縦方向のスクロール位置

scroll関数というものがあり、水平方向と垂直方向ともに１行で取得できます。

続いてスクロールを操作する方法としては、以下のようにするだけです。

const w = window.scrollX;
const h = window.scrollY;

window.scrollTo(300,1500);

scrollToという関数が用意されています。

引数は2つあって、「横方向の動かす量」「縦方向の動かす量」という形になっています。

実際には横方向へスクロールさせることはあまりないかと思います。

代表的なアニメーションとしては「トップに戻る」ボタンです。

縦長のサイトで下までスクロールしてから、特定のボタンをクリックすると自動で上に戻るものですね。

const w = window.scrollX;
const h = window.scrollY;

window.scrollTo(0,0); // ページの先頭に戻ることになる

scrollToで引数を「0」にすることで「先頭に戻る」ことを意味することになります。

スクロールのスピードを少しゆっくりにしたいときはCSSで以下を指定してあげればOKです。

いわゆるスムーススクロールというやつです。

html{scroll-behavior: smooth;}

アニメーションと聞くと数学を理解しておかないといけないように感じるかもしれませんが、大体の場合は専用の関数があるので誰でも簡単にアニメーションを作ることができるんですよね。