ある程度スクロールすると出現する「ページトップへ」ボタンを実装する方法

今回はある程度スクロールすると出現する「ページトップへ」ボタンを実装する方法を紹介します。結構簡単です。

 

HTML

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

 

今回は画像を使用していますが、アイコンやテキストなど何でも構いません。

 

CSS

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

position: fixed;で場所を固定しておきましょう。

bottomやrightは好きな値に変更してください。個人的には画面右下の配置が好きです。

 

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;
    });
});

最初はスクロール量によってボタンの表示・非表示をif文を使って制御します。特定のスクロール量になったら表示、それ以外は非表示という具合です。

あとはanimate()でscrollTop: 0を指定してページトップへアニメーションを行えばokです。アニメーションにかかる時間やイージングは好みで設定してください。

 

また、今回のこのコードを応用して、ある程度スクロールすると画面上部に固定されるヘッダーを作ったりもできます。

汎用性も高いコードなので、いろんな場面で使いまわすことができそうです。