ページ内スクロール移動をCSSのみで実現

2024.11.15 09:00

2024.11.15 09:57

「このページの上へ」のリンクをクリックした際に、アニメーションでなめらかにページ上部に移動する仕組みですが、いままではjavascriptを併用していました。

ところが今はcssだけでできるらしく、しかもすごく簡単。
ということで試してみました。

コードはこんな感じ。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    html {
      scroll-behavior: smooth;
    }
  </style>
  <title></title>  
</head>
<body id="top">

  <div class="container">

    <div style="height: 400px; background-color: azure;">
      <p>
        テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。
      </p>
    </div>

    <div style="height: 400px; background-color: lavenderblush;">
      <p>
        テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。
      </p>
    </div>

    <div style="height: 400px; background-color: bisque;">
      <p>
        テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。
      </p>
    </div>

    <div style="height: 400px; background-color: powderblue;">
      <p>
        テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。
      </p>
    </div>

    <div style="padding-top: 100px; height: 200px;">
      <a href="#top">トップへ</a>
    </div>

  </div>

</body>
</html>

スクロールをわかりやすくするために、
ページをかなり長くしています。

で、HTML的には今までと殆ど変わりません。
bodyに「top」というIDをつけて、下のボタンはtopのIDへアンカーリンクをつけます。
これでページ上部まで移動しますが、当然アニメーションはしません。

キモはCSSです。
htmlタグに「scroll-behavior: smooth;」を指定するだけです。簡単！
bodyタグじゃだめらしいですね。

html {
  scroll-behavior: smooth;
}

欠点はイージングやスピードなどの細かい調節ができないことと、ブラウザ対応です。

イージングやスピードは全然気になりませんし、
ブラウザもちょっと古いsafariとかには対応していないみたいですけど、
動作しないからと言っても移動自体はしますし（瞬間移動だけど）、
致命的なものではないな、と割り切れますね。

今回は以上です！

ページ内スクロール移動をCSSのみで実現

Category

Tag