【jQuery不要】CSSたった1行！ページ内リンクをフワッと「スムーススクロール」にする方法

記事の「目次」や、画面右下の「トップへ戻る」ボタンをクリックした時、画面が一瞬で切り替わるのではなく、フワッと滑らかに移動する「スムーススクロール」。

少し前までのWeb制作では、jQuery（JavaScript）を使って数十行のコードをゴリゴリ書くのが当たり前でした。
しかし現在は、CSSにたった1行書き足すだけで実装できる時代になっています。

この記事では、プラグインやJSを一切使わず、サイトを軽く保ったままスムーススクロールを実装する超カンタンな方法を解説します。

魔法の1行！scroll-behavior を使おう

結論から言うと、お使いのWordPressテーマのCSS（または追加CSS）に以下のコードをコピペするだけで完了です。

/* ページ全体にスムーススクロールを適用 */
html {
    scroll-behavior: smooth;
}

本当にこれだけです！
scroll-behavior: smooth; は、ページ内リンク（アンカーリンク）をクリックした際の移動を、ブラウザの標準機能として滑らかにしてくれる最新のCSSプロパティです。

【プロの小技】固定ヘッダーに隠れてしまう問題の解決法

スムーススクロールを実装した際によく起きるトラブルが、「移動先の見出しが、上部で追従している固定ヘッダー（ナビゲーションメニュー）の下に潜り込んで隠れてしまう」という現象です。

これも昔はJavaScriptでヘッダーの高さを計算してマイナスする…という面倒な処理が必要でしたが、今はCSSだけで一発解決できます。

html {
    scroll-behavior: smooth;
    /* 固定ヘッダーの高さ分（例：80px）だけスクロールの停止位置をずらす */
    scroll-padding-top: 80px; 
}

この scroll-padding-top を指定するだけで、指定したピクセル分だけ手前でスクロールがピタッと止まってくれます。ご自身のサイトのヘッダーの高さに合わせて数値を調整してみてくださいね。

まとめ：JSへの依存を減らしてサイトを爆速に！

アコーディオン（Q&A）や今回のスムーススクロールなど、かつてはJavaScriptが必須だった動きも、今は次々とHTML/CSSだけで実装できるようになっています。

「コピペで動くjQuery」に頼るのをやめ、モダンなCSSを活用して、SEOに強い軽量でサクサク動くサイトを作っていきましょう！