ある一定のページまでスクロールしたあと、ページ上部まで一気にスクロールさせたいことがあると思います。
JavaScriptには、ページを指定した位置までスクロールする関数があります。
JavaScriptのグローバルオブジェクトのwindowオブジェクトに実装されているscrollToを用います。
window.scrollTo(x, y)
scrollToはx座標とy座標を入力して実行します。
x座標はページ左部からy座標はページ上部からの距離を入力します。入力する単位はピクセル単位です。
以下の例ではx座標0、y座標400にスクロールする例です。
|
1 |
window.scrollTo(0, 400); |
大抵のWebページは左右の長さはあまり広くとらないので、x座標を指定することはまれだと思います。
冒頭で書いたような、ページ上部にスクロールさせるにはy座標だけ指定すると良いでしょう。
注意点
window.scrollでスクロールするとき、スクロールは一瞬で行われます。
スムーズにスクロールさせたい場合は複雑なコードを書く必要があります。書く難易度はかなり高いです。
そういうときは公開されているライブラリを使うと良いでしょう。
以下はスムーズなスクロールを実現するライブラリです。参考にしてみてください。
