少しスクロールすると表示される「トップへ戻る」ボタンを実装する方法

ブログでよく見かける、少しスクロールすると「トップへ戻る」ボタンがありますよね。

設置しておくだけでも何かと便利です。

そこで今回はトップへ戻るボタンを実装する方法を紹介します。HTML、CSS、JavaScriptを使って作ります。

 

HTML

<p class="pagetop"><a href="#container"><img src="img/pagetop.png" alt="PAGE TOP" /></a></p>

 

HTMLはかなり簡単な作りで、クリックした時にスクリプトを実行するための<a>タグを用意し、それを<p>タグで囲んでいるだけです。

 

CSS

.pagetop {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

 

position:fixedで位置を固定します。場所は適切な位置になるよう適宜置き換えてください。

また、position: absolute;を指定する方法でも可能です。

 

JavaScript

JavaScriptを使うといいましたが、実際に使うのはjQueryです。

なのでまずはjQuery本体を読み込んでしまいましょう。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

 

次にメインの部分を記述していきます。

//pagetop
$(function() {
    var topBtn = $('.pagetop');
    topBtn.hide();
    //スクロールが100に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
        //ボタンの表示方法
            topBtn.fadeIn();
        } else {
        //ボタンの非表示方法
            topBtn.fadeOut();
        }
    });
    //スクロールしてトップ
    topBtn.click(function () {
        $('body,  html').animate({
            scrollTop: 0
        },   500);
        return false;
    });
});

 

コードの説明です。

まず、トップに戻るボタンは最初は見えていない状態にしておくので、hide()で非表示にしておきます。

次に.scrollTop()でスクロール量を計測し、スクロール量が100を超えたらボタンをfadeIn()で表示させます。それ以外(つまりスクロール量が100未満の時)はelseブロックに記述し、fadeOut()で再び非表示にします。

また、ボタンがクリックされた時はトップに戻るので、click()でクリックイベントを発生させます。

処理自体は簡単で、scrollTop()が0になるまでanimate()でアニメーションさせればokです。アニメーションにかかる時間は自分で調整してもいいでしょう。

$(‘body, html’)というようにbodyとhtmlを指定している理由は、ブラウザによってscrollTop()が利用できる要素がbodyの場合とhtmlの場合があるからです。

 

まとめ

実装自体は簡単だし、なんならコピペでもできるくらいです。

アニメーションのイージングを変更したり、ボタンの見た目や挙動もいじることができるので色々試してみると面白いと思います。

jQueryの中でも基本的なプロパティしか使っていないので、jQueryの勉強を始めたばかりの人でも理解しやすいと思います。

ぜひ試してみてください。