【サンプルあり】JavaScript10行で「トップに戻る」ボタンを実装する

今回はJavaScript（Vanilla JS）10行でアニメーションしながらページのトップに戻れる、「トップに戻る」ボタンの実装方法を解説します。

以下、CodePenで制作したサンプルです。

See the Pen Page Top by POSIPAN (@posipan) on CodePen.

Contents

コード解説
おわりに

コード解説

HTML

ボタン部分HTMLの抜粋です。ボタンはa要素で作成しています。
id属性にpage-topという値を設定しています。

<a id="page-top" href="#"><span>ページのトップに戻る</span></a>

CSS

ボタン部分のCSSです。SCSSで書いています。

position: fixed;で位置を固定し、ページスクロールに追従するようにしています。

#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: block;
  width: 60px;
  height: 60px;
  background: #333;
  &:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -5px) rotate(45deg);
    content: "";
    width: 22px;
    height: 22px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
  }
  span {
    display: none;
  }
}

JavaScript

scrollTopとscrollToについて少し解説します。

その他詳細はコメントをご参照ください。

// body要素のスクロール量を取得、0が返ってくる
const windowTop = document.body.scrollTop;

// #page-topを取得し、変数に代入
const pageTop = document.getElementById('page-top');

// pageTopをクリックした時の動作
pageTop.addEventListener('click', function(e) {
  // a要素のデフォルトの挙動をOFFにする
  e.preventDefault();
  
  //　topで指定した位置に、behaviorで指定した動きでスクロールする
  window.scrollTo({
    top: windowTop, // 0
    behavior: 'smooth' // スムーズに
  });
});