表示するページによってはコンテンツ量が多くなり、ページが長くなってしまうこともよくあります。
WEBサイトでよく見かける右下にある画面上部、ページトップへ戻るボタン。これが設置されているだけでページ移動がし易くなりますよね。

今回の記事ではページトップへ戻るボタンを実装する方法をご紹介したいと思います。

完成コード

まずは完成コードから見ていきましょう。

以下がページトップへ戻るボタンを実装するためのHTMLコードです。

<div class="pagetop"></div>

以下がページトップへ戻るボタンを実装するためのCSSになります。
CSSに必須な設定は無く、お好みのデザインに調整してください。

.pagetop{
    width: 40px;
    height: 40px;
    right: 10px;
    bottom: 10px;
    position: fixed;
    border: 1px solid #000;
    background: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pagetop::before{
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(-45deg);
}

ページトップへ戻るボタンを実装するにはjQueryの読み込みが必要になるので以下のように読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

そして以下がページトップへ戻るボタンを実装するためのjQueryのコードです。

let $pagetop = $('.pagetop');

$pagetop.on('click',function(){
	$('html,body').stop().animate({scrollTop:0});
});

このコードをコピペするだけで実装可能です。

以下が実装サンプルです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

コードの解説

ページトップへ戻るボタンを実装する方法で検索すると10行くらいの長いコードが紹介されていることがよくありますが、最低限のページトップへ戻るボタンを実装するだけであれば以下のコードだけで動作します。

let $pagetop = $('.pagetop');

$pagetop.on('click',function(){
	$('html,body').stop().animate({scrollTop:0});
});

<div class="pagetop"></div>をクリックしたら、画面の上部へスクロールアニメーションしながら戻るというコードが書かれています。

アレンジ

続いて、少しアレンジしたページトップへ戻るボタンのコードをご紹介します。

一定量スクロールしたらボタン表示

画面を表示したはじめはたページトップへ戻るボタンが表示されず、一定量画面を読み進めスクロールしたタイミングでページトップへ戻るボタンが表示されるサンプルです。
サンプルでは100pxスクロールしたタイミングで表示されます。

let $pagetop = $('.pagetop');

/*----- ここを追加 */
$(document).ready(function(){
    $pagetop.stop().fadeOut(1);
});

$(window).on('scroll',function(){
    if( $(this).scrollTop() > 100 )
    {
        $pagetop.stop().fadeIn();
    }
    else
    {
        $pagetop.stop().fadeOut();
    }
});
/*----- ここまで追加 */

$pagetop.on('click',function(){
	$('html,body').stop().animate({scrollTop:0});
});

以下が実装サンプルです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

ボタンを押したら一瞬で上部へ戻る

ページトップへ戻るボタンをクリックしたら画面が消え、再び表示されるとページ上部へ戻っているアニメーションのサンプルです。

let $pagetop = $('.pagetop');
let $html = $('html,body');

$pagetop.on('click',function(){
    $html.stop().animate({"opacity":0},function(){
        $html.stop().animate({scrollTop:0},1,function(){
            $html.stop().animate({"opacity":1});
        });
    });
});

以下が実装サンプルです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

いかがでしたか？
このように短いコードで簡単にページトップへ戻るボタンは実装することが出来ますね。
最後にもう一度、一番最初にご紹介した完成コードを記載しますのでコピペでご使用ください。

<div class="pagetop"></div>

.pagetop{
    width: 40px;
    height: 40px;
    right: 10px;
    bottom: 10px;
    position: fixed;
    border: 1px solid #000;
    background: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pagetop::before{
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(-45deg);
}

let $pagetop = $('.pagetop');

$pagetop.on('click',function(){
	$('html,body').stop().animate({scrollTop:0});
});

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.