【JQuery】スムーススクロールでふわっとページ移動してみよう

こんにちは。JQueryを使用して簡単に出来るスムーススクロールをご紹介いたします。

HTMLで形を作る
CSSでスタイルを設定
JQueryをhtmlへ設定する
JQueryでイベントを設定する

HTMLで形を作る

まずはHTMLでナビゲーションとセッションの形を作っていきます。

<div class="wrapper" id="top">
    <h1>スムーススクロール</h1>
    <nav>
        <ul>
            <li><a href="#index1">index1</a></li>
            <li><a href="#index2">index2</a></li>
            <li><a href="#index3">index3</a></li>
            <li><a href="#index4">index4</a></li>
        </ul>
    </nav>
</div>
<div class="wrapper" id="index1">
    <h2>Section1</h2>
    <p><a href="#top">トップへ戻る</a></p>
</div>
<div class="wrapper" id="index2">
    <h2>Section2</h2>
    <p><a href="#top">トップへ戻る</a></p>
</div>
<div class="wrapper" id="index3">
    <h2>Section3</h2>
    <p><a href="#top">トップへ戻る</a></p>
</div>
<div class="wrapper" id="index4">
    <h2>Section4</h2>
    <p><a href="#top">トップへ戻る</a></p>
</div>

CSSでスタイルを設定

次にCSSでスタイルを決定します。
ここではスクロールさせるため、ある程度セッションの高さを設けています。
また、スクロール後の位置がぴったりにならないようにwrapperクラスにpaddingを設定しています。

*{
    box-sizing: border-box;
}

.wrapper{
    padding: 4rem;
    height: 1000px;
}

h1,h2{
    color: #666;
    margin-bottom: 2rem;
}

li{
    float: left;
    margin-right: 1.5rem;
}

JQueryをhtmlへ設定する

JQueryの設定を行います。
</body>の直前にこのコードを入れます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/style.js"></script>

JQueryでイベントを設定する

JQueryでクリック時にスクロールさせる動作を追加します。
クリック時のイベントは　‘a[href^=#]:not([href=#])’　で条件を付けています。CSS3では条件を付けることができるので、簡単な条件であればこのように記載します。
ちなみに、 a[href^=#] は#から始まる構文を指し、 :not() 疑似クラスで href=# のみの設定を除外しています。

次に移動する位置を取得しています。
$(this).attr(“href”) は、クリックしたaタグのhref属性に設定されている値を取得し、$(href).offset().top で先ほど取ってきたhref属性先の位置を設定しています。
そして、設定したposへanimateメソッドを用いてスクロールさせています。
return falseで戻り値をfalse設定しているのは、リンク先へ移動する機能を動かさないよう無効にしているからです。

$(function () {
    // #から始まらない場合、処理しない
    $("a[href*=#]:not([href=#])").click(function () {
        // 移動する位置を取得
        var href = $(this).attr("href");
        var pos = $(href).offset().top;

        // スクロール処理
        $("html, body").animate({ scrollTop: pos }, 800);

        // リンク先へ移動する機能を無効化
        return false;
    });
});

これでリンクをクリックするとゆっくりスクロールするスムーススクロールを実装することができました。
今回はJQueryで実装してみましたが、調べる中でブラウザが限定されてしまうようですが、CSSのみでも実装できるようなので試してみたいと思います。