【HTML/CSSのみ】ぬるっと動くスムーススクロールの実装 #CSS

#はじめに
スムーススクロールは、同じページ内を滑らかに移動させる機能のことです。
何か項目をクリックすると、画面がぬるっと動くWebサイトをよく見かけると思いますが、あの動きを実現するためのものです。

サイトに動きをつける際、個人的にこれまでは主にJavaScriptを使っていたのですが、スムーススクロールはHTML/CSSだけで実装できると知ったので、実際に試してみました。

#ソースコード・動作

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>Scroll</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

<div class="box top" id="top">
    <span class="text">Top</span>
    <ul class="list">
        <li>
            <a class="link" href="#first">
                <span class="text">To First</span>
            </a>
        </li>
        <li>
            <a class="link" href="#second">
                <span class="text">To Second</span>
            </a>
        </li>
        <li>
            <a class="link" href="#third">
                <span class="text">To Third</span>
            </a>
        </li>
    </ul>
</div>

<div class="scroll-container">
    <div class="box first" id="first">
        <span class="text">First</span>
        <a class="link" href="#second">
            <span class="text next">Next</span>
        </a>
    </div>

    <div class="box second" id="second">
        <a class="link" href="#first">
            <span class="text previous">Previous</span>
        </a>
        <span class="text">Second</span>
        <a class="link" href="#third">
            <span class="text next">Next</span>
        </a>
    </div>

    <div class="box third" id="third">
        <a class="link" href="#second">
            <span class="text previous">Previous</span>
        </a>
        <span class="text">Third</span>
    </div>

    <a class="link scrollToTop" href="#top">
        <span class="text">Topに戻る</span>
    </a>
</div>

</body>
</html>

style.css

/* スムーススクロールの実装 */
html {
    scroll-behavior: smooth;
}

/* スクロールの動きを分かりやすくするための実装 */
.box {
    height: 900px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.first {
    background-color: pink;
}

.second {
    background-color: skyblue;
}

.third {
    background-color: lightgreen;
}

.list {
    margin-left: 30px;
    list-style: none;
}

.text {
    font-size: 50px;
    color: black;
    text-decoration: none;
}

.text.previous {
    position: absolute;
    left: 30px;
}

.text.next {
    position: absolute;
    right: 30px;
}

.link {
    text-decoration: none;
}

.link .text:hover {
    color: gray;
    text-decoration: underline;
}

/* Topに戻る用のリンクを画面右下に固定 */
.scrollToTop {
    position: fixed;
    right: 30px;
    bottom: 30px;
}

↓↓↓少しテキストが小さくなりますが、「0.25×」サイズが動きを確認しやすいです。↓↓↓

See the Pen Untitled by pk_bb (@pk_bb) on CodePen.

#解説
####HTML
aタグのhref属性にスクロール先の要素のidを指定します。
該当箇所をクリックすると、指定したidの要素まで移動するようになります（この時点ではスクロールは機能しない）。

今回は単なるテキストですが、ボタンのデザインを加えれば、より視覚的に分かりやすくなるはずです。

####CSS
今回はページ全体にかかるスクロールなので、htmlに対してscroll-behavior: smooth;を適用しています。
これだけでぬるっと動くスムーススクロールが実現可能です！
簡単ですね！

その他の各要素の配置・配色等はお好みで。

#注意点
####対応ブラウザ
今回の実装内容は、現時点でIEとSafari系は対応していないのでご注意ください（詳細はCan I Use）。

####スクロールの制御
スクロールの動きを細かく制御したい場合は、CSSだけでは対応できないです。

スクロールの速さを調整したい
スクロール先の位置を細かく指定したい

上記のようなことを実現する場合は、JavaScriptでの実装が必要です。

#まとめ
スムーススクロールは今どきのWebサイトには大抵実装されていると思いますが、ユーザーの使いやすさを考慮すると取り入れて損はないので、ぜひ試してみて下さい！

少しでも参考になりましたら幸いです！

#参考情報
https://developer.mozilla.org/ja/docs/Web/CSS/scroll-behavior