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

こんにちは。

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

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

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

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

demo

コード

HTML

  <div class="marker">上</div>
  <div class="spacer"></div>
  <div class="marker">下</div>
  <button id="js-button">Topへ戻る</button>

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

CSS

  #js-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 15px;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .marker {
    font-size: 24px;
    text-align: center;
    padding: 50px 0;
  }
  .spacer {
    height: 2000px;
  }

右下にボタンを配置します。spacerで空間を2000px空けています。

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

JavaScriptの解説