(Sample)

スクロールが実行されたときの処理を設定できるCSSプロパティはscroll-behaviorといいます。以下の2種類があります。

  • auto：リンク先まで瞬時に移動する。
  • smooth：リンク先まで滑らかにスクロールする

autoが初期値です。

9行目のように「scroll-behavior: smooth;」とすることでスクロールがスムーズになります。

なお、22行目のようにref="#top"と指定することでページのトップへ戻ることができます。

<!DOCTYPE html>
<html>
    <head>
        <title>scroll-behavior-smooth.html</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            html {
                scroll-behavior: smooth;
            }

            .space{
                height: 3000px;
                background-image: url("https://picsum.photos/500/500");
            }
        </style>
    </head>
    <body>
        <a href="#dist">ゆっくりスクロール</a>
        <div class="space">
        </div>
        <p id="dist"><a href="#top">トップに戻る</a></p>
    </body>
</html>

Webアプリケーション制作のための小ネタ集　目次に戻る

最後までお読みいただきありがとうございます。

研修のカリキュラムを見てみる