38
43

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-01-28

#はじめに
スムーススクロールは、同じページ内を滑らかに移動させる機能のことです。
何か項目をクリックすると、画面がぬるっと動く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

38
43
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
38
43

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?