素のJavaScriptだけでページのトップへ戻るボタン（jQueryなし）

こんにちは。

今回はjQueryを使わずに、JavaScriptだけでページの一番上に戻るボタンを実装します。

ページ内リンクのようにパッと戻るのではなく、スルスルと滑らかにスクロールさせます。

正直スクロールの操作はjQuery結構便利ですが、読み込み時間がかかるので使いたくないですね。

ということで素のJavaScriptで実装します。

コード

HTML

<button class="scroll-top" id="js-button"><i class="fa fa-chevron-up" aria-hidden="true"></i></button>

Font Awesome アイコンが読み込まれている前提です。ここは画像なり文字なりに置き換えてもかまいません。

ボタンはbutton要素でマークアップします。

CSS

.scroll-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  background-color: #999;
  opacity: .8;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  color: #fff;
}
.scroll-top:hover {
  cursor: pointer;
}

右下にボタンを配置します。色とか大きさは適当に変えて下さい。

JavaScript

scrollTop('js-button', 500);

function scrollTop(elem,duration) {
  let target = document.getElementById(elem);
  target.addEventListener('click', function() {
    let currentY = window.pageYOffset; 
    let step = duration/currentY > 1 ? 10 : 100;
    let timeStep = duration/currentY * step;
    let intervalID = setInterval(scrollUp, timeStep);

    function scrollUp(){
      currentY = window.pageYOffset;
      if(currentY === 0) {
          clearInterval(intervalID);
      } else {
          scrollBy( 0, -step );
      }
    }
  });
}

これはいくつか解説が必要ですね。