【HTML/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×」サイズが動きを確認しやすいです。↓↓↓**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="XWzbgEg" data-user="pk_bb" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/pk_bb/pen/XWzbgEg">
  Untitled</a> by pk_bb (<a href="https://codepen.io/pk_bb">@pk_bb</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

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

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

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

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

https://caniuse.com/?search=scroll-behavior

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

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

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

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

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

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

https://techacademy.jp/magazine/50935