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

こんにちは。

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

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

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

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

demo

コード

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

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

JavaScriptの解説

scrollTop('js-button', 500);

第一引数にはid名を指定。第二引数はTOPに到達するまでの時間。500msなので0.5秒でTOPに到達します。

let currentY = window.pageYOffset;

まずは、現在のスクロール量を取得します。

let step = duration/currentY > 1 ? 10 : 100;

変数stepは一回スクロールする量です。時間に対して距離が短い場合は10pxずつスクロールさせます。
距離が長い場合は100pxずつスクロールさせます。

1pxずつスクロールさせると諸事情によりうまく動作しないので、10pxとか100pxずつスクロールさせます。

let timeStep = duration/currentY * step;

変数timeStepには、何秒に一回スクロールするかを代入しています。

これでjQueryなしで実装できますが、easingの設定はできません。一定の速度でスクロールされる感じです。

トップに戻る動きにeasingは必要ないでしょう。

ページトップに戻るボタンの実装方法はいくつかあるので、色々試してみて下さい。