【JavaScript】

Webサイトのページトップにスムーズに移動(スクロール)させる方法

scrollTo()の使用方法(jQueryは使用しません)

投稿日 2022/03/26 更新日 2022/04/03


こんにちは。当サイトの管理者「元木皇天」です。

さまざまなウェブページを閲覧していると、よくページ最上部へ戻るボタンを見かけることがあります。

このボタンを押すだけでページの最上部までスクロールしてくれるのでとても便利ですよね。

ということで、今回はJavascriptを使用して、ボタンを押したらページトップまでスムーズに移動(スクロール)させる方法について解説いたします。

※jQueryは使用しません。

Safari対応版は以下のリンク先を参考してください。

【JavaScript】Safariでスムーズに移動(スクロール)させる方法

環境
OS:MacOS Big Sur
GoogleChrom:バージョン99.0.4844.83

やりたいこと

ボタンを押したらページトップまで自動でスクロールさせる

以下実装サンプルです。ボタンを押すとページトップまで移動することが確認できます。



参考文献
JavaScript コードレシピ集
Element.scrollTo()の公式ドキュメント

ページトップまでスムーズにスクロールさせる方法

ページトップまでスムーズにスクロールさせる例として、今回はHtmlで以下のように記述されたボタンを押したらスクロールさせることを想定として進めます。

<button id="btn">ページトップへ移動</button>

Javascriptを使用してスムーズにスクロールさせるには、scrollTo()メソッドを使用します。

以下は実際の使用例です。
ボタンのDOMを取得し、スクロールさせるイベントを追加しています。

//ボタンのDOMを取得
const btn = document.getElementById('btn');

//ページトップまでスムーズに自動スクロールさせるイベントを追加
btn.addEventListener('click', () => {

    //スクロールさせる条件を指定
    let scrollToOptions = {
        top : 0, //スクロール位置にページ最上部を指定
        behavior : 'smooth' //スムーズに移動させる条件を指定
    };

    //スクロールを実施する
    window.scrollTo(scrollToOptions);
});

軽くコードについて解説しますと、まずscrollTo()メソッドの引数に渡すパラメータを生成しています(変数:scrollToOptions)。

この変数の中では以下の2つを指定しています

・スクロール先の位置
・どのようにスクロールするのか


まず「top : 0」でスクロール先の位置を指定しています。これはページの上部から0pxの位置を指しています。

もう一つのパラメータの「behavior : 'smooth'」で、スムーズにスクロールさせるという条件を設定しています。

この2つを設定することでページトップまでスムーズにスクロールさせることを実現できます。


-補足-

ちなみに、「behavior」を指定しない、または「behavior : 'auto'」を指定すつと、スクロールせず一瞬でその位置に移動させることができます。

実際に上記コードを使用して作成したボタンが以下になります。

ご参考までに使ってみてください。



Safariではスムーズにスクロールされない時の解決方法

実は先ほどご紹介した方法だと、GoogleChromeだとうまく動くのですが、Safariではスムーズにスクロールされません。。

Safariでも同じようにスムーズにスクロールさせたい場合は以下の記事で方法を紹介していますので、こちらを参考にしてください。

【JavaScript】Safariでスムーズに移動(スクロール)させる方法


また、Google ChromeとSafariでスクロールの処理を分けたい場合は、ブラウザの判定が必要になります。

過去記事で、JavaScriptでユーザが使用するブラウザを判定する方法について解説していますので、こちらもよかったら参考にしてみてください。

【JavaScript】使用しているブラウザを判定する方法

まとめ

Javascriptを使用してページトップにスムーズに自動でスクロールさせるには
scrollTo()
を使用する。

参考文献・おすすめ文献