スムーズスクロールのついたトップに戻るボタンの作成方法

この記事の前提条件

対象: HTML・CSS・JavaScript(全モダンブラウザ対応)
難易度: ★☆☆
所要時間: 約10分

記事の長いブログや、商品数の多い一覧ページでよく見かける「トップに戻る」ボタン。ただページの先頭にジャンプするだけだとカクッと瞬間移動してしまいますが、スムーズスクロール(ふわっと滑らかに移動する演出)を付けると、体験がぐっと上品になります。

目次非表示

CSSだけで実装する(一番シンプル)
JavaScriptで実装する(細かく制御したい場合)
どうしても速度を調整したい場合
まとめ

目次へ

CSSだけで実装する(一番シンプル)

実は、JavaScriptを使わなくてもscroll-behavior: smooth;をCSSに1行書くだけでスムーズスクロールは実現できます。まずボタン部分のHTMLです。

<a href="#top" class="goTop">トップへ戻る</a>

<!-- ページの先頭付近に、ジャンプ先の目印を置く -->
<div id="top"></div>

html {
  scroll-behavior: smooth;
}

html要素にこの1行を指定するだけで、ページ内の#idへのジャンプが全て滑らかになります。JavaScriptを一切書かずに済むので、まずはこの方法を試すのがおすすめです。

JavaScriptで実装する(細かく制御したい場合)

クリック時の挙動を細かく制御したい場合や、CSS側の対応を避けたい場合は、JavaScriptのscrollTo()メソッドでも同じ効果を実装できます。

document.querySelector('.goTop').addEventListener('click', function (e) {
  e.preventDefault();
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});

⚠️ scrollTo()にアニメーション時間(duration)は指定できない

ネット上のサンプルコードで{ top: 0, behavior: 'smooth', duration: 2000 }のようにdurationを指定している例を見かけることがありますが、これは実在しないプロパティで、指定しても何も起こりません。scrollTo()のスクロール速度はブラウザ側の既定値に固定されており、JavaScript標準のAPIだけでは調整できません。

どうしても速度を調整したい場合

スクロール時間を細かく調整したい場合は、requestAnimationFrameを使って自前でアニメーションを組むか、GSAPなどのライブラリのScrollToPluginを使う方法があります。ただし、ほとんどの場面ではscroll-behavior: smoothやデフォルトのscrollTo()で十分な使い心地なので、まずはシンプルな方法から試し、どうしても物足りない時だけ検討するので十分です。