JavaScriptで「topへ戻るボタン」のアニメーションを実装したい

Reactとmobxを使用しています(勉強中)
参考：スクロールするとページトップへ戻るボタンがフェードして表示
上のサイトのような「ページの一番上に移動するボタン」をjQueryを使わずにjsで実装したいです。

#やりたいこと
jQueryを使わずに

・ページの一定の高さ分下へスクロールした時に「topへ戻る」ボタンを表示
・ボタンを押すとページの一番上に移動
・一番上へ移動するときに「画面がパッと切り替わって上に移動する」のではなく
「上へスクロールするアニメーションで移動」させたい(リンク先のサイト参照)

#やったこと
【全体の流れ】
下へスクロールして画面をクリック(main.js)
↓
クリックがトリガーとなりextendObservableにtrue/falseを保存(main.js)
↓
保存されたtrue/falseを受け取りクラス名のon/offを切り替え(scroll.js)
↓
クラス名のon/offで、offの時にdisplay:noneを設定

//main.js

// ↓ topページ
<div className='unique-container-top' id='#top-scroll' onClick={this.ScrollBool}>
hello world!
</div>

// ↓ スクロール量＞500のときrextendObservableのTopButtonDisplayにtrue(またはfalse)を保存
ScrollBool () {
    const DomId = document.getElementById('#top-scroll')
    const ScrollY = window.pageYOffset

    if (ScrollY > 500) {
      scroll.TopButtonDisplay = true; // 500px分下にスクロールした → ボタン表示
    } else {
      scroll.TopButtonDisplay = false; // スクロールしてない → ボタン非表示(display : none)
    }
}

//scroll.js

// ↓ 「topに戻る」ボタン ・ クラス名のon/offの切り替え
<div className={'unique-container-scroll' + (scroll.TopButtonDisplay ? ' on' : ' off')} onClick={this.ScrollTop}>
 <a className='item-button'>TOP</a>
</div>

// ↓ ページの一番上に移動
ScrollTop(){
    window.scrollTo(0,0);
}

//extendObservable.js

// ↓ scroll.jsのtrue/falseを保存
const scroll = new class {
  constructor () {
    extendObservable(this, {
      TopButtonDisplay: '', // ここにmain.jsからのtrue/falseが入る
    });
  }
}

scroll.jsの(scroll.TopButtonDisplay ? ' on' : ' off')でクラス名のon/offを切り替え
cssでoffの場合にdiplay : noneにしています。

main.jsでonClick={this.ScrollBool}としているのは、
本当は「スクロールされたことを感知してextendObservableにtrue/falseを保存」したいのですが、
jsで「スクロールを感知」する方法が分からないので、クリックで代用している状態です。

#質問
jQueryを使わずに

①jsで「スクロールされたことを感知して関数を実行」するにはどうすれば良いですか？

②ページの一番上に移動するとき、window.scrollTo(0,0);を使うと画面がパッと切り替わって移動するのを
「上へスクロールするアニメーションで移動」させるにはどうすれば良いですか？

特に②を解決したいです。CSS3を使うのはOKです。
jQueryを使わないという縛りは単に「jsで実装したい」という動機だけです。

jsは勉強中なので、できれば易しく教えてください。
文章やコードにわかりにくい部分があれば修正します。
回答よろしくお願いします。