Webサイトを閲覧している際、目次や「トップへ戻る」ボタンをクリックした瞬間にパッと画面が切り替わるのではなく、スルスルと滑らかに移動する演出を目にすることが多いでしょう。
この挙動を「スムーススクロール」と呼びます。
しかし、手軽になった一方で「指定したのに動かない」「固定ヘッダーでスクロール位置がずれる」といったトラブルも増えています。
この記事では、CSSによるスムーススクロールの基本から、位置ズレを防ぐ最新のプロパティ、JavaScriptを使ったカスタマイズ方法まで、実務で即活用できるサンプルコードと共に詳しく解説します。
 執筆者：マヒロ |
|
- OS：Windows 11 / macOS Sequoia
- IDE：Visual Studio / VS Code / IntelliJ IDEA
- その他：Chrome DevTools / 各言語最新安定版
※本メディアでは、上記環境にてコードの動作と情報の正確性を検証済みです。
CSSの一行で完結！scroll-behavior: smooth の使い方
現在のWeb制作において、最も推奨されるスムーススクロールの実装方法は、CSSの scroll-behavior プロパティを使用することです。
特別なライブラリを読み込む必要がなく、コードの可読性も抜群です。
ここでは、最も基本的なページ全体への適用方法と、その仕組みについて見ていきましょう。
ページ内リンクを滑らかにする基本コード
ページ全体のスクロールを滑らかにするには、html 要素に対してプロパティを指定します。
<!-- HTML構造 -->
<nav>
<a href="#section1">セクション1へ移動</a>
</nav>
<div id="section1" style="margin-top: 1000px;">
<h2>セクション1</h2>
<p>ここが目的地です。</p>
</div>
<style>
/* ページ全体にスムーススクロールを適用 */
html {
scroll-behavior: smooth;
}
</style>
実行結果と解説
html タグに scroll-behavior: smooth; と記述するだけで、そのページ内のすべてのアンカーリンク（ページ内リンク）が滑らかなアニメーションで移動するようになります。
このソースコードの利点は、HTMLの構造を一切汚さずに、サイト全体のユーザー体験を向上させられる点にあります。
ブラウザがネイティブに処理を行うため、JavaScriptによる実装に比べて動作が非常に軽量で、スマートフォンのブラウザでも安定して動作するのが大きな特徴です。
スムーススクロールが効かない？主な原因と解決方法
「CSSを書いたはずなのに、ページ内リンクが瞬時に切り替わってしまう」という問題は、初心者が最もハマりやすいポイントです。
css スムーススクロール 効かない という検索意図の多くは、以下の設定漏れや構造上の問題に起因します。
ここでは、トラブルを解決するためのチェックポイントを整理しましょう。
適用対象の誤りとブラウザの優先順位
CSSのスムーススクロールは、スクロールが発生している「コンテナ（親要素）」に対して指定する必要があります。
/* NG例：特定の要素だけに指定しても動かないことがある */
.content {
scroll-behavior: smooth;
}
/* OK例：通常はhtmlまたはbodyに指定する */
html, body {
scroll-behavior: smooth;
}
ページ全体のスクロールは通常 html 要素が管理していますが、環境や既存のテンプレートによっては body 要素や特定の div がスクロールの主体となっている場合があります。
確実に動作させるためには、html と body の両方、あるいは overflow: auto; が指定されている親要素に対して scroll-behavior を適用しているか確認してください。
ユーザー設定によるアニメーション無効化
OSのアクセシビリティ設定で「視覚効果を減らす」が有効になっているユーザーの場合、ブラウザは意図的にスムーススクロールを無効化します。
これはエラーではなく、ユーザーの意図を尊重するための仕様です。
開発時に自分のブラウザで動かない場合は、PC本体の設定も確認してみましょう。
固定ヘッダーでスクロール位置がずれる問題を解決する
実務でスムーススクロールを導入する際に必ずと言っていいほど発生するのが、「移動先の見出しが固定ヘッダーの下に隠れてしまう」という位置ズレの問題です。
この問題を解決するために、以前はダミーの要素を置くなどのハックが必要でしたが、現在は最新のCSSプロパティでスマートに解決できます。
scroll-padding-top による余白調整
<header class="fixed-header">固定ヘッダー（高さ60px）</header>
<style>
.fixed-header {
position: fixed;
top: 0;
width: 100%;
height: 60px;
background: #fff;
}
/* スクロールの停止位置に余白を作る */
html {
scroll-behavior: smooth;
scroll-padding-top: 80px; /* ヘッダーの高さ + 少しの余裕 */
}
</style>
実行結果と解説
scroll-padding-top は、スクロールした際の「表示領域の上限」を指定するプロパティです。
このソースコードのように固定ヘッダーの高さ分（またはそれ以上）の数値を指定しておくと、ブラウザは移動先の要素がヘッダーと重ならない位置でピタッと止まってくれます。
要素ごとに個別の調整をしたい場合は、移動先の要素自身に scroll-margin-top を指定する方法も有効です。
JavaScriptで計算する必要がなく、CSSだけで完結するため、レスポンシブデザインとの相性も非常に良い手法です。
JavaScriptやjQueryを使ったスムーススクロールの実装
「スクロールの速度をもっと細かく調整したい」「スクロールが終わった後に特定の処理を実行したい」といった、標準のCSS機能だけでは物足りない高度な要望がある場合は、JavaScriptやjQueryを使用します。
ここでは、スムーススクロール js 簡単 に実装できる最新の書き方を紹介します。
window.scrollTo を使ったネイティブJSでの実装
// 全てのページ内リンクを取得
const links = document.querySelectorAll('a[href^="#"]');
links.forEach(link => {
link.addEventListener('click', e => {
e.preventDefault(); // デフォルトの挙動をキャンセル
const href = link.getAttribute('href');
const target = document.querySelector(href);
if (target) {
// スムーススクロールを実行
window.scrollTo({
top: target.offsetTop - 60, // ズレを調整
behavior: 'smooth' // ここでスムースを指定
});
}
});
});
実行結果と解説
JavaScriptの window.scrollTo メソッドを使用しています。
オプションとして behavior: 'smooth' を指定することで、プログラム経由でも滑らかな移動が可能になります。
このソースコードの最大のメリットは、移動先の座標（top の値）を計算式で自由に変えられる点です。
固定ヘッダーの高さがデバイスごとに変わるような動的なサイトでも、柔軟に対応できるため、複雑なUIを持つWebアプリなどではこちらの手法が選ばれます。
HTML/CSSのスキルを活かして年収を上げる方法
以上、CSSでのスムーススクロールの実装方法について解説してきました。
| 年収アップにこだわりたい方 （平均アップ額138万円の実績） | テックゴー |
| 未経験・経験者問わず幅広く探したい方 | ユニゾンキャリア |
| 業界に精通した担当者に相談したい方 | キッカケエージェント |
| ゲーム業界への転職を志望する方 | ファミキャリ |
| エンジニア未経験からキャリアを築く方 | イーチキャリア |
