まず、結論から申し上げますと以下のコードを追加CSSに記述するだけです。
html {
scroll-behavior: smooth;
}Contents
ページ内リンクをスクロールさせる理由
ページ内リンクとは、同一ページ内で移動するために貼られたリンクのことで、普通は、リンク元からリンク先まで、一瞬でジャンプします。そうすると、ユーザーからは、同一ページ内で移動したのか、違うページに遷移したのか分かりづらいですよね。
そのためにスルスルっとスクロールして移動過程を見せるとこによって、ユーザーにページ内を移動していること、また、上に移動したのか、下に移動したのかを知らせることができます。
ページ内リンクの作成方法
ページ内リンクを作るにはリンク元とリンク先の設定が必要です。
まずは、リンク先（クリック時に飛んだ先）の要素にid名をつけます。ワードプレスの場合は、リンク先を選択した状態で、編集画面右下「高度な設定」＞「HTMLアンカー」にお好きなid名を付ければOKです（例として、HTMLアンカーにlink1というIDを付けました）。
そして、リンク元（クリック時に飛ぶ前）の要素にリンクの設定をします。ワードプレスの場合は、要素選択時に出てくるツールバーから、（－）をクリックして、先ほどのID名を設定します。このとき、ID名の前に「#」を付けてください。
グローバルメニューでページ内リンクの設定をする
グローバルメニューとは、ホームページの上部などにある、各ページ共通のメニュー項目のことです。ヘッダーメニューやグローバルナビゲーションなどとも言われます。
ワードプレスの場合、基本的に「外観」＞「メニュー」から、グローバルメニューの設定をします。
メニュー項目を追加で「カスタムリンク ▼」をクリックし、リンク先URLとリンク文字列を入力します。
リンク先URLは、先ほどの例だと「#link1」になります。リンク文字列は、リンク先の項目名ですので自由に決めてください。
リンク先URLですが、ホームページが1ページだけで出来ているのならこれでいいのですが、複数ページで構成されている場合、トップページ以外のページではうまく作動しません。
リンク先のURLが、本来、「https://ホームページ.○○/#link1」だったとして、サブページからだと、「https://トップページ.○○/サブページ/#link1」にジャンプすることになります。
このようなことを避けるために、先ほどのリンク先の設定を「https://ホームページ.○○/#link1」と省略せずに記述する必要があります。
追加CSSの記述
最後に冒頭のCSSコードを記述します。
こちらは、「外観」＞「カスタマイズ」をクリック、「追加CSS」をクリックし、
こちらのコードを記述します。
html {
scroll-behavior: smooth;
}「scroll-behavior」の対応状況
以前はSafariなどで使えなかったようですが、現在ではIE以外ではほぼ対応されていますので、使用して問題ないかと思います。
参照：https://developer.mozilla.org/ja/docs/Web/CSS/scroll-behavior
ページ内リンクをスクロールさせるその他の方法は？
ページ内リンクのスムーズスクロールさせる方法は、他にもいろいろあります。例えば、プラグインを使った方法やjQueryやJavaScriptを使った方法などです。
プラグインEasy Smooth Scroll Linksは、現在ダウンロードできません。
簡単にページ内リンクをスムーズスクロールさせることができる便利なプラグイン「Easy Smooth Scroll Links」ですが、2022年4月からダウンロードがストップされており、新たに利用することは出来なくなっております。
jQueryやJavaScriptを使った方法
jQueryやJavaScriptを使って、ページ内リンクをスクロールさせる方法も多く紹介されていますが、前述のグローバルメニューのリンク先の設定が、「#link1」だと作動するのに「https://ホームページ.○○/#link1」だと作動しない。つまり、単ページのサイトならいいが、複数ページのサイトだと難しい場合があります。
まとめ
今回ご紹介した「scroll-behavior」を使った方法だと、CSSを1文追加するだけでページ内リンクをスムーズにスクロールさせることができ、大変簡単で便利ですので、ご参考にしていただければと思います。
