CSS とアンカーを使用してスムーズなスクロールを実現するにはどうすればよいですか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS とアンカーを使用してスムーズなスクロールを実現するにはどうすればよいですか?

Barbara Streisand

Oct 29, 2024 pm 06:24 PM

How Can I Achieve Smooth Scrolling with CSS and Anchors?

CSS とアンカーを使用したスムーズなスクロール

シームレスなユーザーエクスペリエンスを実現するために、クリックしたときにスムーズなスクロールを実装したい場合があります。ページの上部にあるボタン。入力ボタンを使用した CSS のみのソリューションも利用できますが、アンカーを活用する代替アプローチを検討します。

スムーズなスクロールを実現するには、指定されたスクロールコンテナーのスクロール動作プロパティ (MDN リファレンス) を利用します。

<code class="css">scroll-behavior: smooth;</code>

ログイン後にコピー

このプロパティは、Firefox、Chrome、Safari、Opera などの最新のブラウザーでサポートされています。ただし、Internet Explorer や非 Chromium Edge などのブラウザはスクロール動作をサポートしていないことに注意してください。

これを実装する方法の例は次のとおりです。

<code class="html"><head>
  <style type="text/css">
    html {
      scroll-behavior: smooth;
    }
  </style>
</head>
<body id="body">
  <a href="#foo">Go to foo!</a>

  <!-- Some content -->

  <div id="foo">That's foo.</div>
  <a href="#body">Back to top</a>
</body></code>

ログイン後にコピー

[移動] をクリックすると、ふー！」リンクでは、「foo」要素までスムーズにスクロールし、「トップに戻る」リンクではその逆を体験できます。

このアプローチでは、追加のボタンを必要とせずに、便利でスムーズなスクロール動作が実現します。

以上がCSS とアンカーを使用してスムーズなスクロールを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。