「トップへ戻る」ボタンはなぜ必要なのか？

近年はどんなWebページでも、スマホ対応していないものはありません。スマホのスクリーンは基本縦長なので、Webページも縦長を意識することになります。スクロールせずにスマホのスクリーンサイズだけで、コンテンツを詰め込めるなら話は別ですが、そんなページは皆無と言っていいでしょう。

コンテンツが多ければ多いほど、ページが縦長になり、スクロール量も増えていきます。コンテンツを見終わって、ページの一番下までスクロールした時に、ページのトップからもう一度見たいと思ったらまたスクロールして戻らなければなりません。それは正直ちょいダルいです。そのダルさを回避するために「トップまで戻る」ボタンが必要なのです。また、ボタンを設置することでUXの向上を図ることができ、結果的にSEO効果にも良い影響を与えます。

実装方法

実装するにはJavaScriptの知識が必要です。方法はいくつかあると思いますが、今回はjQueryは使用せず、生のJavaScriptのみで実装していく方法を紹介していきます。ざっと内容は下記の通りです。

• 「トップへ戻る」ボタンクリック
• ↓
• クリックされた時点の垂直スクロール量を取得
• ↓
• 取得した垂直スクロール量から一定数を引いていくタイマーを発動
• ↓
• 引いていった数が0になったらタイマーを止める

全体のコードは以下のようになります。

1. const html = document.querySelector('html');
2. const page_top = document.getElementById('page-top');
4. page_top.addEventListener('click', () => {
5.   let i = html.scrollTop;
7.   function scrollToTop() {
8.     const timeoutId = setTimeout(scrollToTop, 1);
9.     window.scrollTo(0, i -= 200);
11.     if (i < 0) {
12.       clearTimeout(timeoutId);
13.     }
14.   }
15.   scrollToTop();
16. });

では、一つずつ解説していきます。

1. const html = document.querySelector('html');
2. const page_top = document.getElementById('page-top');

まず、html要素と、page-topという”id”を振ったbutton要素を取得します。

1. page_top.addEventListener('click', () => {
2.   let i = html.scrollTop;

ボタンがクリックされたら、垂直にスクロールされた量を取得します。垂直にスクロールされた量とは、ユーザーがコンテンツを見終わるまでのスクロール量です。そのスクロール量を取得するにはhtml.scrollTopを使いますが、これはwindow.scrollYと同じです。取得したスクロール量はのちに使用するので変数に入れおきます。今回、変数名はiにしてますが、わかりやすければどんな名前でも構いません。

1. function scrollToTop() {
2.   const timeoutId = setTimeout(scrollToTop, 1);
3.   html.scrollTo(0, i -= 200);
5.   if (i < 0) {
6.     clearTimeout(timeoutId);
7.   }
8. }
9. scrollToTop();

続いて今回のメイン部分の紹介になります。scrollToTop()は自作関数です。setTimeoutメソッドを使って、scrollToTopを1ミリ秒毎に繰り返すようにしています。

setTimeoutメソッドは、一定時間毎に指定されたコードを繰り返し実行するタイマーです。第一引数に実行したい処理コード(関数)、第二引数に秒数を設定します。

例えば、以下の場合は1ミリ秒毎にHello,World!をコンソールに表示するタイマーとなります。

1. function helloWorld () {
2.   setTimeout(helloWorld,100);
3.   console.log("Hello,World!")
4. }
5. helloWorld();

話を戻します。scrollToTop()で一番やりたいことはhtml.scrollTo(0, i -= 200)の部分です。scrollToメソッドは指定した要素内で、実装者が任意に決めた座標位置までスクロールをさせる時に使います。第一引数はX座標、第二引数はY座標を指定します。今回はhtml要素内で垂直スクロールのみさせたいので、html.scrollTo()とし、X座標には0、Y座標には動かしたいスクロール量を入れます。ちなみにhtml.scrollToは、window.scrollToと同じですのでどちらでも構いません。

i-=200は、変数iから200を引く演算子です。変数iってなんだったでしょう？そうです、垂直にスクロールされた量、つまりユーザーがコンテンツを見終わるまでのスクロール量でしたね。その数字から200を引くということは、ページトップに向かって200ピクセルスクロールさせることを意味します。その処理をsetTimeoutメソッドで、1ミリ秒毎に繰り返すことで、段々とページトップまで自動的にスクロールさせるようにしているのです。

さて、段々とページトップまでスクロールする処理が設定できました。setTimeoutメソッドは、どこかでタイマーを止めないと永遠にコードを実行してしまいます。そこで使用するのが、clearTimeoutメソッドです。

clearTimeoutメソッドの引数にはtimeoutIDと言う変数を指定します。変数名はなんでも良いのでtimeoutIDじゃなくても構いません。その変数には繰り返し実行させていたsetTimeoutメソッドを入れます。const timeoutId = setTimeout(scrollToTop, 1);の部分ですね。これでタイマーを止める準備が出来ました。あとは、ページトップまで戻ったらclearTimeoutを実行すると書いてあげればOKです。

1. if (i < 0) {
2.   clearTimeout(timeoutId);
3. }

変数iが0以下になるということはページがトップまで戻ってくることを意味するので、そうなったらclearTimeoutを実行してあげます。これでsetTimeoutメソッドのタイマーを止めることができます。