プラカンブログSTAFF BLOG

2016.05.12

一定量スクロールすると表示する「ページトップ」ボタンの実装方法

title

こんにちは。デザイナーの(鈴)です。
今回は「ページトップ」ボタンのちょっとしたスクリプトを紹介します。

一定量スクロールすると「ページトップ」ボタンが表示されるサイトがあります。
フェードやスライド表示することで、動きのあるサイトにしたい時や、
メインビジュアルが大きく、ファーストビューで「ページトップ」ボタンを
表示したくない場合にはとても便利なスクリプトです。
それでは実装方法を紹介していきます。

html

下記は「ページトップ」ボタンが画像の場合の記述になります。
CSSのみでの表示も可能です。

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

 

CSS

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

「fixed」にして固定配置にしています。
デザインに合わせて値を変更してください。

javascript

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

9行目の「topBtn.fadeIn();」部分で表示方法、
12行目の「topBtn.fadeOut();」部分で非表示方法を指定しています。
今回はフェードですが、スライドなどのアニメーションも可能です。

18行目の「scrollTop() > 100」部分でスクロールした量を指定しています。
スクロール量を調整したい場合は「100」を変更してください。

19行目の「}, 500);」部分でスクロールする時の速度を指定しています。
「500」の部分を好きな値に変更してください。

実装してみて

上記だけ実装できるので、とても簡単です。
「ページトップ」ボタンの配置やデザインはカスタマイズ可能です。
今回の表示方法はフェードですが、スライドなどのアニメーション表示もできます。
サイトに合わせて、デザインや表示方法を変えて実装してみてください。

特にシンプルなデザインのサイトには動きが生まれ、
いいアクセントになる有効なスクリプトです。

また今回のスクリプトは汎用性が高く、
スクロールするとヘッダーを固定表示するカスタマイズも可能です。
ぜひ試してみてください。

参考リンク

下記サイトは参考にしたサイトになります。
表示方法の別パターンの説明もあるので、詳しく知りたい方はどうぞ。

http://www.webopixel.net/javascript/538.html
http://www.nxworld.net/tips/page-top-appears-scroll.html

この記事は、SUZUKI が書きました。