Webサイトを作成する際、ナビゲーションメニューからページ内の特定の場所に移動できる「ページ内リンク」は欠かせない機能のひとつです。ユーザーは「サービス」「料金」「お問い合わせ」といったメニューをクリックするだけで、同じページ内の該当セクションへ移動できます。ところが、リンクをただ設定するだけでは一瞬でジャンプしてしまい、体験としてはやや不自然です。そこで利用されるのが スムーズスクロール です。画面がなめらかに移動するため、ユーザーは「どこからどこへ移動したのか」を視覚的に理解でき、快適にページを閲覧できます。この記事では、スムーズスクロールを実現する方法を初心者向けに詳しく解説します。
ランディングページ（LP）やWordPressでよく使われる「ナビゲーションメニューから各セクションへスムーズにスクロールする」仕組み。ユーザーにとって使いやすく、離脱を防ぐ効果もある大切なテクニックです。この記事では、HTML+CSSで簡単に実装する方法と、JavaScriptで細かく制御できる方法をわかりやすく解説します。初心者の方でもすぐに導入できるので、ぜひ参考にしてください。
ナビゲーションメニューから各セクションへスムーズにスクロールする方法
ランディングページ（LP）などで、ナビゲーションメニューをクリックしたときにページ内の特定の場所へスクロール移動する方法を紹介します。WordPressでも使用可能なシンプルな方法です。
方法①：HTMLとCSSだけで簡単に実装
id属性を使ったアンカーリンクと、CSSのscroll-behaviorでスムーズスクロールを実現します。
See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.
これを加えると、リンクをクリックしたときにスクロールがアニメーション付きで行われるようになります。JavaScriptを使わなくても動作するため、初心者に最もおすすめの方法です。主要なブラウザの多くでサポートされています。
方法②：JavaScriptでより柔軟にスクロール
scrollIntoView()を使って、カスタマイズ可能なスムーズスクロールを実装する方法です。
See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.
どちらの方法を使うべき？
| 方法 | メリット | デメリット |
|---|---|---|
| 方法①（HTML+CSS） | シンプルで簡単。追加のコードが不要。 | スクロールの細かい調整はできない。 |
| 方法②（JavaScript） | 動作のカスタマイズが可能。 | JavaScriptの読み込みが必要。 |
ユーザー体験とSEOへの効果
スムーズスクロールを導入することで、ユーザーは移動の流れを直感的に理解できるようになります。特に長い1ページ型のWebサイトでは、ページ内移動が自然でわかりやすくなり、離脱率の低下や滞在時間の増加につながります。これらは間接的にSEO評価の向上にも寄与します。また、ナビゲーションリンクを適切に設定することは検索エンジンにとってもページ構造の理解を助けるため、SEO的にも効果的です。
まとめ
- ナビメニューからセクションに飛ばすには
id属性を活用する。 scroll-behavior: smooth;で滑らかにスクロール。- 細かい動作制御が必要ならJavaScriptを活用。
ナビゲーションメニューから各セクションへスムーズにスクロールする方法は非常にシンプルです。基本はHTMLの id とアンカーリンク、そこにCSSの scroll-behavior: smooth; を追加するだけで実現できます。さらに演出を加えたい場合はJavaScriptを活用しましょう。こうした工夫はWebサイトを見やすくするだけでなく、ユーザー満足度やSEOの改善にもつながります。初心者でも簡単に導入できるので、ぜひ自分のサイトに取り入れてみてください。
どちらもWordPressにそのまま使えるので、目的やレベルに応じて選んでみてください。
その他初心者の方向けに投稿しているのでプログラミング備忘録もご覧ください。
コメント