今回はjQueryを使って、「aタグをクリックするとページ内スクロールする方法」について解説していきます。

コピペできるので、是非真似して実装してみてください！

aタグをクリックするとページ内スクロールする方法

完成形はこちらです。

See the Pen
Untitled by webis (@webis-co)
on CodePen.

headerにあるセクション1・セクション2・セクション3のナビメニューをクリックしてみてください。

クリックすると、指定のセクションまで自動でスクロールするでしょう。

今回は上記のように、ナビメニューのaタグをクリックすると自動でページ内スクロールするようにコーディングしていきます！

準備

まずはjQueryのコードをbodyタグの閉じタグの上に書きましょう。

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

こちらを書くことで、jQueryを使うことができます。

HTML

<!-- header -->

    <header class="header">
        <div class="header__nav">
            <ul>
                <li>
                    <a href="#sec1">セクション1</a>
                </li>
                <li>
                    <a href="#sec2">セクション2</a>
                </li>
                <li>
                    <a href="#sec3">セクション3</a>
                </li>
            </ul>
        </div>
    </header>

    <!-- box -->

    <section class="box" id="sec1">
        <h2>セクション1</h2>
    </section>


    <section class="box" id="sec2">
        <h2>セクション2</h2>
    </section>


    <section class="box" id="sec3">
        <h2>セクション3</h2>
    </section>

まずはheaderを作成していきます。

ページ内スクロールを作る上でのポイントは、まずクリックしてページ内スクロールさせたいaタグに対して「#」をつけた値を、aタグの中にあるhref属性に記述します。

今回は「#sec1・#sec2 ・#sec」をaタグに指定しました。

そしてスクロールして移動させたい部分に「id=””」を指定します。

以下のように名前を揃えておきましょう。

名前を揃えないと、ページ内スクロールしないので注意してください！

CSS

/* header */

.header {
    max-width: 1000px;
    margin: 0 auto;
    padding: 30px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header__nav ul {
    display: flex;
}

.header__nav ul li:not(:first-child) {
    margin-left: 50px;
}

.header__nav ul li a {
    text-decoration: none;
    color: black;
}

.header__nav ul li a:hover {
    opacity: 0.7;
}

/* box */

.box {
    height: 100vh;
    text-align: center;
}

#sec1 {
    background-color: burlywood;
}

#sec2 {
    background-color: chocolate;
}

#sec3 {
    background-color: crimson;
}

JavaScript

// scroll
$(function () {
    $('a[href^="#"]').click(function () {
        var speed = 1000;
        var href = $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top;
        $("html, body").animate({ scrollTop: position }, speed, "swing");
        return false;
    });
});

「＃」が指定されているaタグをクリックすると、1秒の速度でページ内スクロールするようにしました。

「var speed = 1000;」の数字の部分はスクロールのスピードなので、自由に変えてみてください。

まとめ

以上が、jQueryを使って、「aタグをクリックするとページ内スクロールする方法」でした。

WEBサイトで頻繁に使われる実装なので、是非挑戦してみてください。