JavaScriptで画面をスクロールする方法:window.scrollTo()

ある一定のページまでスクロールしたあと、ページ上部まで一気にスクロールさせたいことがあると思います。

JavaScriptには、ページを指定した位置までスクロールする関数があります。

JavaScriptのグローバルオブジェクトのwindowオブジェクトに実装されているscrollToを用います。

window.scrollTo(x, y)

scrollToはx座標とy座標を入力して実行します。

x座標はページ左部からy座標はページ上部からの距離を入力します。入力する単位はピクセル単位です。

以下の例ではx座標0、y座標400にスクロールする例です。

window.scrollTo(0, 400);

大抵のWebページは左右の長さはあまり広くとらないので、x座標を指定することはまれだと思います。

冒頭で書いたような、ページ上部にスクロールさせるにはy座標だけ指定すると良いでしょう。

注意点

window.scrollでスクロールするとき、スクロールは一瞬で行われます。

スムーズにスクロールさせたい場合は複雑なコードを書く必要があります。書く難易度はかなり高いです。

そういうときは公開されているライブラリを使うと良いでしょう。 

以下はスムーズなスクロールを実現するライブラリです。参考にしてみてください。

イベント

購読

平日・毎朝更新中