【JavaScript】

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

Safari対応版を作成しました

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


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

先日当サイトにて「【JavaScript】Webサイトのページトップにスムーズに自動で移動(スクロール)させる方法」という記事を公開したのですが、ブラウザがSafariだとスムーズに動かないことが判明しました。。。

ということで、今回はブラウザがSafariの時でもJavascriptでスムーズにスクロールさせる方法について解説いたします。

環境
OS:MacOS Big Sur
Safari:バージョン15.0

やりたいこと

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

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



参考文献
JavaScript コードレシピ集
改訂3版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
setTimeout()の公式ドキュメント
Element.scrollTo()の公式ドキュメント

【Safari対応版】ページトップまでスムーズにスクロールさせる方法

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

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

Safari環境にて、Javascriptを使用してスムーズにスクロールさせるには、scrollTo()メソッドとsetTimeout()メソッドを組み合わせて実装する必要があります。

具体的な処理の流れは以下の通りです。

①ボタンの画面最上部からの絶対位置を取得
②①-100px(「-」はマイナスの意味)の位置までスクロールする
③②が0以下になるまで③を30ミリ秒ごとに繰り返す
④スクロール完了

ポイントとなるのは②と③の処理です

②の処理では、ちょびっとだけスクロールを実行しています。そしてそのちょびっとを③で繰り返し続けます。

少し上にスクロールして、30ミリ秒後にまた少し上にスクロールして・・・・と繰り返していくうちにページ最上部まで繰り返しスクロールされるということです。

また、30ミリ秒ごとにスクロールを実施しているため、スムーズにスクロールされているように見えます


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

※以下ソース中のコメントは上記説明で使用した①〜③に対応させています。

//ボタンの位置の値を保持する変数
let itemHeight = 0;
//ボタンのDOMを取得
const btn = document.getElementById('btn');
//ページトップまでスムーズに自動スクロールさせるイベントを追加
btn.addEventListener('click', () => {
    //①ボタンの画面最上部からの絶対位置を取得
    itemHeight = btn.getBoundingClientRect.top + window.pageYOffset;

    //function scroll()を呼び出して、スクロールする
    scroll();
});

//スクロールを実行するメソッド
function scroll(){
    //②①-100px(「-」はマイナスの意味)の位置までスクロールする
    itemHeight = itemHeight - 100;
    scrollTo(0, itemHeight);

    //③②が0以下になるまで③を30ミリ秒ごとに繰り返す
    if(itemHeight < 0){
        return;
    }else{
        setTimeout(scroll, 30);
    }
}

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

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



より簡潔なコードでページトップまでスムーズスクロールさせる方法

今回紹介した方法はやや複雑でわかりにくいコードとなってしまっています。

もし、Safariに対応させなくても良いというのであれば、より簡潔なコードで同じことを実件することができます。

こちらについては過去の記事で紹介していますので、以下のリンク先を参考にしてみてください。

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


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

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

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

まとめ

Safari環境にてJavascriptを使用してページトップにスムーズにスクロールさせるには
scrollTo()で少しスクロールする処理をsetTimeout()で繰り返し実行する

参考文献・おすすめ文献