2015.03.02
WEB

jQueryでページトップへ戻るを実装！初心者でも超簡単作成

マイケルデザインちーむ

よくサイトを見ているときに『グリグリッ』とページをスクロールすると、右っちょに『ニュルルッ』と出てきて、『ポチッ』っとやさしく押すと『ビュビュッ』とページのトップへ移動するあのボタン。アレって便利ですよね。

今回は、そんなページのトップへ移動するボタンの作成を解説していきたいと思います。

1 制作手順
2 画像の用意と設置
- 2.1 HTML・CSSの記述
3 ページトップへ移動の設定
4 スクロール途中にボタンを出現させる
- 4.1 if文の記述
5 マウスオーバー時のアニメ―ション設定
6 ソースコード
7 ユニークなページトップボタン
8 お疲れさまでした。

画像の用意と設置

ボタンとなる画像を用意します。
ボタンとして使えそうなものを用意して下さい。
ここでは、以下のpng画像を使って作成していきます。

ページトップへ画像

HTML・CSSの記述

次に、HTMLを書いていきます。


<div id="pagetop">
    <img src="risu.png">
</div>

画像をimgタグで設置し、その周りをdivタグで囲みid名を「pagetop」としました。

cssも書いてきます。


#pagetop{
    position:fixed;
    right:20px;
    bottom:-60px;
    cursor:pointer;
}

「position:fixed;」で、スクロールしても位置が固定された状態にし、位置は顔だけ出るように右下に設置しました。また、画像の上にマウスを乗せた時に、マウスカーソルが指マークに変わるように「cursor:pointer;」としました。
ここまでの手順を実装したページは以下になります。

デモページ（1.画像の用意と設置）
スクロールしても、右下の画像が固定されたままのが分かると思います。

ページトップへ移動の設定

画像がクリックされたときに、ページトップに戻るようにJavaScriptを書いていきます。
JavaScriptのライブラリでjQueryを使用しますので、jQueryを読み込む必要があります。

jQueryの基本の書き方

jQueryには、記述の型があり以下のようになります。


$(document).ready(function(){
    //ここにjqueryの処理を記述
});

まず、$(document).readyの部分ですが、$(ダラー)は、実はjQueryの省略された書き方です。jQuery(document).readyと書いても同じです。
つまりこれは、jQueryを呼び出す記述になります。簡単に言うと「これからjQuery書きますよ」意味です。
documentは、HTMLの読み込みのことです。readyはそのまま「準備」って意味です。
functionの中身の記述されたものが処理されていきます。
つまり、ここは「HTMLの読み込みが準備できたら処理するぜ」って意味になります。

これは、略して書くことが一般的で以下のように書きます。


$(function(){
  //ここにjqueryの処理を記述
});

もっと基本を詳しく知りたい方はjQuery、簡単に入門編を書いてみた。の記事をどうぞ。

クリックイベントの設定

用意した画像がクリックされたら、ページトップにスクロールして移動するよっていう命令を書いていきます。


$(function(){
    $('#pagetop').click(function () {
        //id名#pagetopがクリックされたら、実行される処理を記述
    });
});

さきほどの説明の通り「$(function(){ ～ });」の中に、書いてきます。
$(‘#pagetop’).click( ～ );は、#pagetopがクリックされたらっていう意味で、id名#pagetopがクリックされたら、処理を実行します。

ページトップ移動のanimate設定


$(function(){
    $('#pagetop').click(function () {
        //id名#pagetopがクリックされたら、以下の処理を実行
        $("html,body").animate({scrollTop:0},"300");
    });
});

2行目の「$(‘#page’).click( ～ );」の中身ですが、まず、$(“html,body”)はページ全体を選択しています。htmlとbodyを同時に選択している形になりますが、複数でセレクタを選択する場合はカンマ「,」で区切ります。

どうしてhtmlとbodyを同時に選択するかといいますと、WEBブラウザによっては、bodyに効くけどhtmlだと効かない、逆にhtmlに効くけどbodyだと効かないみたいなことがあるからです。WebKit系ブラウザでは、bodyに効き、それ以外のブラウザではhtmlに効きくみたいです。

4行目の「animate」は、指定したセレクタの属性を個別にアニメーションすることできます。アニメーションってのは何かと言うと、選択したセレクタの位置や幅を変えたり、その変化のスピードを変えたりと汎用性の高いことが色々できます。今回の場合だと、animateの書き方は、animate({属性:属性の変化の値},”速度設定”)っていう風になります。

属性のscrollTopですが、これはウィンドウの一番上からの現在のスクロール位置を指定することができます。ページトップに移動させるので、ウィンドウの一番上に指定してあげます。つまり0（ゼロ）です。速度設定は、’slow’、’normal’、’fast’、の文字列か、もしくはミリ秒単位の数値を入れることができます。今回は300に設定。

ここまでの手順を実装したページは以下になります。
デモページ（2.ページトップへ移動の設定）

スクロール途中にボタンを出現させる

サイトのページトップから、下にスクロールしていくと途中から、ページトップのボタンがヒョイっと出現するサイトってよくありますよね。今度はそれを実装していこうと思います。
まず、以下がソースになります。


$(function(){
    $('#pagetop').hide();
    $(window).scroll(function () {
        if($(window).scrollTop() > 0) {
            $('#pagetop').slideDown(600);
        } else {
            $('#pagetop').slideUp(600);
        }
    });
});

hide()は、非表示にする命令で、これを使って最初に画像を非表示にします。
3行目の「$(window).scroll( ~ );」は、ウィンドウがスクロールされたら処理という意味です。

if文の記述

次のifですが、下記の構文にあるように(条件)に合致するものが、処理1が実行され、合致しなかったら処理2が実行されます。


if(条件){
    処理1
}else{
    処理2
}

「scrollTop()」でスクロールの位置の値を取得しています。ここのif文は、スクロールの位置が上から0以上の時は処理1が実行されて、それ以外の時は処理2が実行されるってことになります。
処理1であるslideDownは、隠れている画像を縦方向にスライドしながら表示させていきます。処理2であるslideUpは、slideDownとは逆に画像を縦方向にスライドしながら非表示させていきます。カッコの中の数値を変更することで表示、非表示のスピードを設定することができます。

ここまでの手順を実装したページは以下になります。
デモページ（3.スクロール途中にボタンを出現させる）

マウスオーバー時のアニメ―ション設定

今度は画像の上にマウスが乗ったとき、つまりマウスオーバーした時に、動作するものと作っていきたいと思います。
以下のコードを書き足します。


 $(function(){
    $("#pagetop").mouseover(function(){
        $(this).animate({
            bottom:"0px"
        },300);
    });
    $("#pagetop").mouseout(function(){
        $(this).animate({
           bottom:"-60px"
        },300);
    });
});

mouseover、mouseoutで、それぞれマウスのポインタが乗った時、外れた時の処理を実行できます。ここでは、マウスのポインタが乗った時は下から0pxの位置に移動、外れた時は下から-60pxの位置に移動という風にしています。

ここまでの手順を実装したページは以下になります。
デモページ（4.マウスオーバー時のアニメ―ション設定）

ソースコード

以下、今までのをまとめたソースコードになります。


<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #pagetop{
            position:fixed;
            right: 20px;
            bottom:-60px;
            cursor:pointer;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    
    <script>
        $(function() {
            //ページトップへのスクロール
            $('#pagetop').click(function () {
                //id名#pagetopがクリックされたら、以下の処理を実行
                $("html,body").animate({scrollTop:0},"300");
            });
            //ページトップの出現
            $('#pagetop').hide();
            $(window).scroll(function () {
                if($(window).scrollTop() > 0) {
                    $('#pagetop').slideDown(600);
                } else {
                    $('#pagetop').slideUp(600);
                }
            });
            //ホバーイベント
            $("#pagetop").mouseover(function(){
                $(this).animate({
                    bottom:"0px"
                },300);
            });
            $("#pagetop").mouseout(function(){
                $(this).animate({
                    bottom:"-60px"
                },300);
            });
        });
    </script>
</head>
<body>
    <div id="container">
        <div id="pagetop">
            <img src="risu.png">
        </div>
    </div>
</body>
</html>