はじめに

今回のD.M.C.【デベメモドットコム】の記事は「超簡単にスムーズスクロールの自作をしよう」ということでプラグインを使用せずに、javascript(jQuery)で実装していこうと思います。

ではまずこれから作成していくデモを見てみましょう。

デモはこちら

プラグインを使用してもいいのですが、今回は自作で作成して説明していきたいと思います。

まずは必要なファイルを読み込もう

では、まず初めに最低限、必要なものを準備していきましょう。

今回自作するページトップ（スムーズスクロール）機能はjQueryを使用するのでHTMLのheadタグ内に読み込むタグを記述していきます。

今回はファイルをダウンロードせずにCDNを使って外部から読み込んで作業していきたいと思います。

下記がコードになっています。

<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script type="text/javascript" src="script.js"></script>

必要最低限のファイルは、HTMLを記述する為のファイルとCDNで外部から読み込んでいるjquery.min.jsです。

今回はそれに加えて外部ファイルとしてスタイルを記述していく為のstyle.cssと実際にコードを書いていくscript.jsを使用していきます。

jquery.easing.min.jsに関してはスムーズスクロールする際に少し変化のあるアニメーションを加えたい場合はお好みで読み込んでみてください。いらない場合は削除してもらっても大丈夫です。

下記にjQueryライプラリのダウンロード先・CDN・easingCDN・easing早見表のリンクを貼っておきますのでよろしければ使用してください。

最新のjQueryのダウンロードはこちらから

最新のjQueryのCDNはこちらから

最新のeasingのCDNはこちらから

easingの種類に関しての早見表はこちらから

HTMLコードの記述

今回作成していくスムーズスクロールは「aタグ」の「href属性」に「#id名」を記述すればスムーズスクロールするようにしていくので下記のように記述してください。

<p id="page-top"><a href="#">ページトップへ</a></p>

このHTMLコードはボタン部分になるところです。

CSSコードの記述

では続いてstyle.cssに最低限のスタイルを記述していきましょう。

記述自体は先ほどのボタンに対してのスタイルになっていて、positionプロパティにfixedを指定してスクロールしても常にひっついてくるようにしていきたいと思います。

下記がコードになっています。

#page-top {
    position : fixed;
    bottom : 80px;
    right : 60px;
}

#page-top a {
    padding : 15px 15px;
    text-align : center;
    letter-spacing : 2px;
    background : #efd97a;
    color : #ffffff;
}

#page-top a:hover {
    background : #eccb3d;
}

最低限の記述なので、お好みに変更してみてください。

jQueryを書いていこう

ではさっそくscript.jsにjQueryを書いていきましょう。

まずはじめにHTMLコードが全て読み込みが完了してから、実行されるための記述をします。

お決まりの書き方なので、丸ごと覚えてしまっていいと思います。

下記のように記述してください。

$(function() {

 // ここにコードを書いていくよ

});

クリックイベントを記述していきましょう。「a」要素が指定されている部分は、「#」からはじまる「href属性」がクリックされたら、なかの部分が実行されますよ。というコードになっています。

もう少し詳しく説明するとクリックした要素を取得して「onメソッド」の第一引数になにをしたらイベント発火するかを記述するので、今回はクリックした時に処理を動作させたいので「click」を記述します。

そしてイベントが実行されると、そのまま第二引数の無名関数が実行されて中の処理を続けて実行していくという流れになります。

下記がコードになっています。

$(function() {
    $('a[href^="#"]').on('click', function() {
        // クリックされるとここが実行されます。
    });
});

「var」は変数宣言で、「speed」は変数の名前になっていて「1200」を代入しています。この数値はスクロール時のスピードの為に指定しています。

少しわかりづらいですが、数値の部分はミリ秒単位になっています。今回の指定は「1200」となっているので1.2秒になっています。こちらは実際に実行してみて好みのスピードに色々変更してみてくださいね。

$(function() {
    $('a[href^="#"]').on('click', function() {
        var speed = 1200;
    });
});

続いて「easing」変数はイージングの名前を文字列で指定して代入しています。

「easing」変数の中身はこちらにeasing早見表があるので色々変更してみたり試してみてください

今回は「easeInOutBack」を指定していますが、jquery.easing.min.jsを読み込まない場合は使用できませんので注意してください。

$(function() {
    $('a[href^="#"]').on('click', function() {
        var speed = 1200;
        var easing = 'easeInOutBack';
    });
});

どんどんいきましょう。続いて「href」変数にはクリックした要素自身の「href属性」を代入します。

$(function() {
    $('a[href^="#"]').on('click', function() {
        var speed = 1200;
        var easing = 'easeInOutBack';
        var href = $(this).attr('href');
    });
});

「target」部分はif文の短縮構文の三項演算子というものです。これは「href」変数が「#」と等しいか、または（OR）厳密に空文字列なのかを判定していてTRUE(真)の場合は「html」という文字列をFALSE(偽)の場合は「href」変数を「target」変数に代入しています。

$(function() {
    $('a[href^="#"]').on('click', function() {
        var speed = 1200;
        var easing = 'easeInOutBack';
        var href = $(this).attr('href');
        var target = $(href == '#' || href === '' ? 'html' : href);
    });
});

「position」変数は先ほどの判定で入れたtarget変数の要素のトップの位置情報を代入しています。

$(function() {
    $('a[href^="#"]').on('click', function() {
        var speed = 1200;
        var easing = 'easeInOutBack';
        var href = $(this).attr('href');
        var target = $(href == '#' || href === '' ? 'html' : href);
        var position = target.offset().top;
    });
});

続いて「html」と「body」を2つ指定している部分は、ブラウザによって動作しない場合があり、「body」はFirefoxでは動作せず、「html」はchromeでは動作しない為、両方を指定することで、WebKitブラウザにも、それ以外のブラウザにも両方対応するようにしています。

「animate」メソッド部分はプロパティscrollTopの値に先ほどのposition変数の値を設定し、speed変数を第二引数に、easing変数を第三引数に設定していきます。

そうする事によってスクロールしたい位置までスクロールすることができます。

また最後のreturn falseはa要素のリンクを無効化するための記述になっています。

$(function() {
    $('a[href^="#"]').on('click', function() {
        var speed = 1200;
        var easing = 'easeInOutBack';
        var href = $(this).attr('href');
        var target = $(href == '#' || href === '' ? 'html' : href);
        var position = target.offset().top;

        $('html, body').animate({
            scrollTop : position
        }, speed, easing);

        return false;
    });
});

ページトップのおまけ

今回、自作で作成したものでもいいのですが、今回は番外でよくあるはじめは非表示でスクロールを少しするとふんわりとページトップが現れる部分も作成していきたいと思います。

コード自体はすごく簡単なので、大丈夫です。

まずページトップのボタンに指定したid要素を変数pagetopに代入します。

    var pageTop = $('#page-top');

その部分をあらかじめ「hide」メソッドを使用して非表示にします。

今回は「hide」メソッドを使用して非表示にしていますが、もちろん「css」であらかじめに「display」プロパティを「none」してもいいですし、どちらでもかまいません。

    var pageTop = $('#page-top');
    pageTop.hide();

続いて、スクロールイベントを記述していきます。

この部分はスクロールするたびに「scroll」メソッドの第一引数の無名関数が実行されるようになっています。

スクロールするたびに、イベントが発生するのであまりいい書き方ではないかもしれません。

setTimeoutなどを使用した書き方もあるのですが、今回はこちらのシンプルな書き方でいきます。

    var pageTop = $('#page-top');
    pageTop.hide();

    $(window).scroll(function() {
        // ここに処理を書きます。
    });

無名関数の中身の処理はif文を記述していきます。

内容はスクロールした時の画面上の位置の判定を行っています。

スクロールした画面位置が120px以上になれば「fadeIn」メソッドを実行して少しづつと表示させます。

またスクロールした画面位置が120px以下になれば「fadeOut」メソッドが実行され少しづつと非表示になります。

    var pageTop = $('#page-top');
    pageTop.hide();

    $(window).scroll(function() {
        if ($(this).scrollTop() >= 120) {
            pageTop.fadeIn();
        } else {
            pageTop.fadeOut();
        }
    });

ダウンロード

作成したすべてのファイルをダウンロードする事ができます。

よければダウンロードしてください。

ダウンロードはこちら

感想

今回の記事「超簡単にスムーズスクロールの自作をしよう」は自作で機能を作成してみたのですが、ネットにはたくさんの方がプラグインを無料で配布してくれているので、僕自身も普段の案件ではプラグインに頼ることが多いのですが、プラグイン任せにしている部分を実際に書いてみることで「こういった処理の流れになるのか〜」を勉強になることが多いです。

当サイト（D.M.C.）ではプラグインの紹介もしていくとは思いますが、こういった自作で作成していく方法の記事も紹介していけたらと思います。