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

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

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

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

目標物を確認

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

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は関数としての効果は同じだそうです。。。

効果としては、 window.scrollTo もこのメソッドと同じです。

window.scroll by MDN

モダンといいつつ、Chrome, Firefox, Safariの最新版、IE11で動作確認しました。このまま使っても大丈夫そうですね!

Javascriptのおすすめ勉強法

学習サイトとしてはドットインストールがオススメです。

僕は基本Progate派なのですが、Javascriptに関してはドットインスールが最適です。

  • とにかく講座数が多い(課金は必須)
  • 実際にアプリを作りながら学べるので実践に近い
  • よく使う技術は何度も出てくるため、自然と覚えられる

例えば、setIntervalとclearIntervalは何度も出てくるので、よくわからない人は理解を深める意味でもオススメです!

Javascriptのオススメ書籍

Javascriptでオススメの書籍はこちらです。

正直内容はツマラナイのですが・・・。

タイトル通り「コードレシピ集」となっており、辞書的に使うのに最適です!

上記のドットインストールと合わせて使うことで、内容を補完し合えるのでオススメです。

まとめ

・やはりjQueryは便利

この記事を書いた人

のせっち

福岡県出身。早稲田大学卒。創業100年の鉄鋼商社でバンコク駐在最年少抜擢。毎日擦り切れるまで働かなくても幸せに生きている人々を見てフリーランスになりました。
現在は、主にバンコクでWeb制作、物販を中心に生きています。