【脱jQuery】Javascriptのみでトップへ戻るボタンを実装【コピペ】

投稿日 2020年5月29日
更新日 2021年2月25日
著者のせっち
カテゴリープログラミング
カテゴリー脱jQueryシリーズ

こんにちは！フリーランスWebディレクター兼エンジニアののせっち@nosecchi01です。

jQueryを使わず、Javascriptのみでトップへ戻る(スクロールトップ）ボタンを実装する方法を紹介します。

Javascriptに慣れている方にはクドい解説になっているかもしれませんが、
初心者の方向けに、かなり細かく解説をしていきます！

jQueryで実装する方法も解説しています。

目標物を確認

早速コードペンで見てみましょう！

See the Pen ScrollTop (javascript) by Yuki Nose (@yukinouz1) on CodePen.

下へスクロールへした後右下の『TOP』ボタンを押してみてください。

ページトップまで戻ります。

Javascriptの解説

HTML, CSSは基本的な事しか書いていないので、主にJavascriptを解説していきます。

まずは全体像を見てみましょう！

// スクロールトップボタン
scrollTop('js-scroll-top', 150); // 遅すぎるとガクガクになるので注意

function scrollTop(el, duration) {
  const target = document.getElementById(el);
  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);
    // timeStepの間隔でscrollUpを繰り返す。
    // clearItervalのために返り値intervalIDを定義する。

    function scrollUp(){
      currentY = window.pageYOffset;
      if(currentY === 0) {
          clearInterval(intervalId); // ページ最上部に来たら終了
      } else {
          scrollBy( 0, -step ); // step分上へスクロール
      }
    }
  });
}

大まかな流れは下記です。

scrollTop関数を定義する
-Y方向へ動かすためのscrollUp関数を定義する

scrollTop関数を定義する

function scrollTop(el, duration) {
  const target = document.getElementById(el);
  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);
    // timeStepの間隔でscrollUpを繰り返す。
    // clearItervalのために返り値intervalIdを定義する。

});
}

更に細かく分解します。

function scrollTop(el, duration) {
}

・scrollTopの引数にelとdurationですね。こちらはそれぞれ、

scrollTop('js-scroll-top', 150);

こちらで値が代入されますね。

const target = document.getElementById(el);

document.getElementById();でid属性を拾ってきます。elは今回のケースだと’js-scroll-top’のことですね！

let currentY = window.pageYOffset; // 現在のスクロール位置を取得

現在のY座標を取得し、currentYに代入します。

let step = duration/currentY > 1 ? 10 : 100; // 三項演算子

こちらは三項演算子でして、if文を短く書くときに用います。下記の書き方です。

条件式　?　条件が正しいときの値　:　条件が間違っているときの値

三項演算子とは
「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

if文で書くと下記のようになります。

let step = duration / currentY
if (step > 1){
 step = 10;
} else {
 step = 100;
}

三項演算子は短く書けるのがメリットですが、パッと見わかりづらいので、if文で書いておくのも全然アリだと思います！

これで上部にきた時にスクロール量が落ちるようになっています。

let timeStep = duration/currentY * step; // スクロールスピードの速さ調整

・duration : 今回のケースではscrollTop(‘js-scroll-top’, 150);　に入力した150ミリ秒

・currentY : 現在のスクロール位置

・step : 先ほど計算したスクロール量

let intervalId = setInterval(scrollUp, timeStep);
    // timeStepの間隔でscrollUpを繰り返す。
    // clearItervalのために返り値intervalIDを定義する。

setIntervalでscrollUpの処理を、timeStepの間隔で繰り返す処理を行います。

後のほど、clearIntervalで繰り返し処理を抜けるために、返り値をItervalIdに代入します。

-Y方向へ動かすためのscrollUp関数を定義する

 function scrollUp(){
      currentY = window.pageYOffset;
      if(currentY === 0) {
          clearInterval(intervalId); // ページ最上部に来たら終了
      } else {
          scrollBy( 0, -step ); // step分上へスクロール
      }
    }
  });

 if(currentY === 0) {
          clearInterval(intervalId); // ページ最上部に来たら終了
      } else {
          scrollBy( 0, -step ); // step分上へスクロール
      }

・currentY === 0 つまり、ページ最上部に来たらスクロールを終了します。

・scrollBy( x,y )なので、x方向はゼロ(0)、y方向はstep分上方向へスクロールします。

これで解説は終了です。

おまけ：モダンな書き方（簡単）

もっとモダンな書き方がありましたので紹介します。

See the Pen Scroll Top (Modern Javascript) by Yuki Nose (@yukinouz1) on CodePen.

const PageTopBtn = document.getElementById('js-scroll-top');
PageTopBtn.addEventListener('click', () =>{
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});

なんと、たった数行で実装できてしまいます。あんなにややこしいことしなくてよかったんですね。

ちなみに、scrollとscrollToは関数としての効果は同じだそうです。。。