スムーズ スクロールは、ページのセクション間を簡単に移動できるようにすることでユーザー エクスペリエンスを向上させる最新のマイクロ アニメーション機能です。セクションに即座にジャンプするのではなく、スムーズなスクロールにより、滑らかで魅力的なトランジションが作成されます。これは、突然のジャンプでユーザーを圧倒することなく、ユーザーの関心を維持する素晴らしい方法です。

この記事では、スムーズなスクロールを実装する 2 つの方法を検討します:

• CSS の使用
• JavaScript の使用

まず、スムーズなスクロールのための CSS の使用について詳しく見ていきましょう。

スムーズスクロールに CSS を使用する理由

CSS は、スムーズなスクロールを実現するための最も簡単で推奨される方法です。余分な JavaScript が読み込まれないため、ページのパフォーマンスが効率的となり、高速かつ軽量になります。これをプロジェクトに実装してみましょう。

ステップ 1: ナビゲーション バーを作成する

まず、ナビゲーション リンクを保持する単純なナビゲーション バーを作成しましょう。これらのリンクにより、ユーザーはページ上の特定のセクションに移動します。

ページの特定のセクションに簡単にジャンプできるように、ナビゲーション リンクがアンカー タグであることを確認してください。

ステップ 2: セクションの作成
ナビゲーション リンクを作成したので、対応するセクションを作成しましょう。

各ナビゲーション リンクのセクションを作成しました。

ステップ 3: スクロール可能なコンテンツを追加する
スムーズなスクロールを機能させるには、ページにスクロールするのに十分なコンテンツが必要です。ページをスクロール可能にするためにダミー テキストを追加しましょう。

ついに、ページをスクロール可能にするのに十分なコンテンツができました。

ステップ 4: ナビゲーションをセクションにリンクする
アンカー タグの href 属性を使用して、スクロールするセクションを参照します。 # の後に対応するセクション ID を追加するだけです。

つまり、上の画像で基本的に行っていることは、href 属性を使用して、ナビゲーション リンクを移動させたいセクションを参照することです。

ステップ 5: 適切なセクションに適切な識別子 (id) を割り当てます

したがって、ここで行ったことは、href 属性と ID を使用して、各リンクを適切なセクションに割り当てるだけです。したがって、href が #section-one のナビゲーション リンクは、ID が section-one

ナビゲーション リンクをクリックすると、そのセクションが表示されます。
しかし、私たちが気づいたことがあります。スムーズではなく、ページがセクションにジャンプするため、素晴らしいエクスペリエンスではありません。

ステップ 6: CSS でスムーズ スクロールを追加する
スムーズなスクロールを有効にするには、HTML 要素に 1 つの CSS プロパティを追加します。

scroll-behavior プロパティを HTML に追加すると、ナビゲーション リンクがクリックされたときにスムーズなスクロール効果を確認できます。

仕組み

内部では、アンカー タグの href 属性は従来、外部ページまたは URL へのナビゲーションに使用されていました。ただし、# とそれに続くセクション ID を組み合わせると、アンカー タグは現在のページ内を「検索」し、対応するセクションまでスクロールします。スクロール動作を追加することで、次のようになります。 CSS プロパティを使用すると、セクション間の流動的な移行が作成され、全体的なユーザー エクスペリエンスが向上します。

スムーズなスクロールを実現するもう 1 つの方法は、JAVASCRIPT を使用してスクロールを処理することです。
わずか数ステップでこれを達成することもできます:

注意: 各セクションには以前と同様に割り当てられた ID が残ります。

ステップ 1:scrollIntoView 関数を作成する

同じ結果を得るために、scrollIntoView メソッドを使用する関数を JavaScript で作成できます。同様に:

ステップ 2: リンクがクリックされたときに機能を埋め込む

各ナビゲーション リンクにアタッチされたイベント リスナー内に、scrollIntoView 関数を埋め込みます。こうすることで、リンクをクリックすると、ページが参照先のセクションまでスムーズにスクロールします。

これは、開発に使用しているフレームワークに応じてリファクタリングすることもできます。

これは、直感的な Web ページを構築するときにスムーズなスクロールを実現する 2 つの簡単な方法です。

ご質問やフィードバックがある場合は、コメントを残してください。