【CSSのみ】ページ内リンクをスムーズにスクロールさせる

今日はデザインに凝ってみます。

ページ内リンクの動きをスムーズにします。

CSSだけで手軽に使えます。

以下のリンクをクリックしてみて下さい。

See the Pen
スムーズなリンク by MacLove (@maclove1)
on CodePen.

こんな風に流れるスクロールを実装していきます。

CSS

結論。

html要素に、

scroll-behavior: smooth;

を指定するだけ。簡単です。

html {
    scroll-behavior: smooth;
}

以下全体のコードを貼っておきます。

HTML

<nav id="nav">
    <a href="#page-1">page1</a>
    <a href="#page-2">page2</a>
    <a href="#page-3">page3</a>
</nav>

<div class="container">
    <div id="page-1" class="contents"><a href=#nav>topへ</a></div>
    <div id="page-2" class="contents"><a href=#nav>topへ</a></div>
    <div id="page-3" class="contents"><a href=#nav>topへ</a></div>
</div>

CSS

html {
    scroll-behavior: smooth;
}

a {
    display: inline-block;
    width: 100px;
    text-decoration: none;
}

nav {
    margin: 0 auto;
    text-align: center;
}

.container {
    margin-top: 300px;
}

.contents {
    background-color: pink;
    border: solid 1px white;
    height: 600px;
}

以上です。