ページのトップへ戻るボタン、少し見直してみませんか？

こんにちは、つばさ（@_tsubasa123_）です。

先日、いわゆる「ページのトップへ戻る」ボタンをオリジナルで作成したのですが、その時に個人的に気になったところをメモしておきます。

basanote.hatenablog.com

ちょっとプログラムよりの意識高い系な内容です。プログラムとか興味ないし、って方にはおもしろくない記事だと思います、ごめんなさい。

JavaScriptでスクロールしている

「ページのトップに戻るボタン」については特に説明はいらないと思いますので省略。あると便利ですよね。

当ブログに設置するにあたっていくつか参考になる記事を拝見したのですが、どこも同じようなJavaScriptコードを記述していました。やはり皆さん使い回したりされてるんでしょうか。

<script>
  $(window).scroll(function(){
    if($(window).scrollTop() > 500){
      $("#page-top").fadeIn();
    }else{
      $("#page-top").fadeOut();
    }
  });
  
  $("#move-page-top").click(function(){
    $("html,body").animate({scrollTop: 0}, 350);
  });
</script>

このようなコードです。

簡単に説明すると、上の7行がブラウザのスクロールをチェックする命令です。500ピクセルより下にスクロールしたらボタンをふわっと表示、反対に500ピクセルより上に戻ったらふわっと非表示に。です。

下の3行がボタンをクリックした際にページのトップまで戻る命令です。ボタンがクリックされたらページのトップまで350ミリ秒（0.35秒）かけて戻る。です。

プログラムとかわからなくてもなんとなくニュアンスはつかめるんじゃないかと思います。

スクロールをチェックするのがキライ

 完全に私の主観になりますが、私は上記のようなコードが好きじゃありません。繰り返しますが、私の主観です。必要なら私自身も同様のコードを書くことがありますが、個人的には好みじゃない、という話。

何がキライなのか？スクロールをチェックするという処理がキライです。なぜか？記事を見てくれているユーザーの負担になる可能性があるからです。

先ほどのプログラムだとブラウザのスクロールをチェックして、スクロールが発生するたびに現在のスクロール位置に合わせた処理が行われることになります。100ピクセルスクロールしたら100回命令が実行されることになるわけです。

ブラウザのスクロールってたくさん発生しますよね。それを逐一チェックして命令を実行するのって結構大変そうじゃないですか？特に長い記事を書く方、一気にスクロールされたりしますよね、あの瞬間、裏では命令が実行されまくっていますからね。

なんとなくエコじゃない感じは伝わりましたでしょうか？

そうだ、タイマーにしよう

じゃあどうするか、代替手段としてタイマーを使ってスクロール位置をチェックするようにします。

<script>
var $w = $(window), $pageTop = $('#page-top'), isShow = false;
function checkScroll() {
    if ($w.scrollTop() > 500) {
        if (!isShow) {
            isShow = true;
            $pageTop.fadeIn();
        }
    } else {
        if (isShow) {
            isShow = false;
            $pageTop.fadeOut();
        }
    }
}

setInterval(checkScroll, 1000 / 30);
</script>

細かくは説明しませんが、ブラウザのスクロールを監視する方法から、タイマーで1秒に30回の間隔で命令を実行する方式に変更しました。ついでにボタンが見えてるか見えていないかも覚えておいて、無駄に命令を実行しないようにしています。

チェックする間隔をもっと長く（1秒に2回とか）にすればより無駄を減らすことが可能です。今回の「ページのトップに戻るボタン」のように、表示/非表示が多少遅れても大きな問題にならないような命令であれば長めの間隔でも特に支障はないと思います。

スクロールしていない状態でも命令が実行されてしまうのが無駄なのかもしれませんが、一時的に過負荷になるのを防ぐためのトレードオフということでこれは致し方ないところです。

これ意味あるの？

正直わかりません。昨今のブラウザは優秀ですから、これしきのことでパフォーマンスに影響することはないのかもしれません。とはいえ、無駄なことはしないに限ります。

余計な命令を実行すればその分だけユーザーに負荷がかかる可能性が高くなります。具体的にはブラウザの動きが遅くなったり、スマホが熱くなったり、バッテリーの消費量が多くなったりなどの悪影響が考えられますね。特にAndroid端末は影響が大きいと聞きました。

ブログは特にスマホで閲覧される機会が多いものだと思いますので、ユーザーに優しいブログ運営のために少しJavaScriptにも気遣いがあってもいいのかな、と思う次第です。

さいごに

昔、JavaScriptの勉強を始めた際に、先輩に教わったことを思い出してそのまま記事にしてみました。先輩、お元気ですか。私は元気です。

繰り返しますが、私の主観であってこれが正しいと主張するつもりはありませんし、私はそんなにプログラムに精通しているわけでもございません。ちょっとした思い出話、でございました。

冒頭でも述べましたが、私もコピペでできるようにオリジナルのカスタマイズを行ってみましたので、まだ導入されていない方、もしよければお試しください。

basanote.hatenablog.com

ではでは、最後までお付き合いいただきありがとうございました。