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

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

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

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);
    }
}

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

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