（JavaScript）ページトップに戻るの多分一番簡単な方法

フッターによくある「↑ページトップに戻る」ですが、単なるページ内リンクで処理してしまえば瞬間的にページトップに画面が移り変わってしまいます。

それはそれで目的を果たせているのですが、最近のサイトではよく見かけることができるのですが、フッターからトップに戻るときの動作がゆっくりするするとページの上にスクロールしながら戻っているものがあります。

これはカッコがいいとかの見た目の演出だけの問題ではないと思っています。上述したように、単なるページ内リンクだけの場合だと、瞬間的にページトップに画面が移り変わってしまいます。

この動作だとユーザーはこの移動が同一ページ内の移動なのか、他のページへの移動なのかの判断がつきません。

ところがこのゆっくり戻るという動作のおかげで、同一ページ内の下部からトップに戻っているということが確実に実感できるので、ユーザーは同一内ページでの移動だと認識できるのです。

特にコンテンツ量の多いページでは、ページ内を上下して内容を確認をしたい時があります。例えば通販サイトのLPであれば、購入ボタンをクリックする前にもう一度内容をよく確認したいということもあります。この時にページ内を上に戻っているんだとユーザーが実感できれば、いざ購入と思った時に「先ほど下にボタンがあったな」と思い出してくれるはずです。

リンクをクリックするたびに別のページに移動させる（あるいは移動しているかどうか判断がつかない）というのはユーザーが現在いる場所を見失うことになり、これにより機会損失や離脱の原因にもなりえます。

JavaScriptによるページトップに戻るの実装方法

さて、これを実装する方法は幾つかありまして、有名なのは「smoothscroll（スムーススクロール）」というものです。これはとても有名でして、同一の名前もしくは類似した名前で多くの方がプラグインを作成してくれています。そのため「smoothscroll」で検索すると候補がたくさん見つかるので、これを使っての実装には苦労はしないはずです。

ちなみに私もよく利用させてもらっているのですが、ものによっては動作しない（PCはOKだけどスマホが×も含めて）ものもあったりします。

原因の追記に時間を使うのも勿体無いので、こんな時は2〜3試して動くものを採用するという感じでしています。

ただ、もっと簡単にやりたい場合はこんな方法もあります。

HTML部分

<p id="page-top"><a href="#">ページトップに戻る</a></p>

JavaScript

と言ってもjQueryを使いますが。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(function() {
        $("#page-top a").click(function() {
            $('html,body').animate({
                scrollTop: 0
            }, 'fast');//この場所に数値を入れるとミリ秒単位で移動のスピードを調整できます
            return false;
        });
    });
</script>

これをページ上に直接書くだけですので、簡単に済ませたい時はこのように書くようにしています。