Webページを訪れたユーザーが「必要な情報にすぐアクセスできる」ことは、ユーザーの利便性を高める上でとても重要です。
そんなユーザビリティ（使いやすさ）を高める手段のひとつが、同一ページ内の特定箇所へスムーズに移動できるページ内リンクの活用です。
ユーザーのストレスを減らし、滞在時間や満足度を高めることで、間接的にSEOにも良い影響を与える可能性があるため、検索順位を意識する方にとっても見逃せない施策といえるでしょう。
この記事では、ページ内リンクの基本的な仕組みから、スムーススクロールによる滑らかな移動の実装方法、そして「リンクが効かない」「思った位置に飛ばない」といったよくある不具合の原因と解決策までをわかりやすく解説します。
- HTMLだけでできる基本的なページ内リンクの書き方と構造の理解
- ページ内リンクにスムーススクロールを実装する方法（CSS・jQuery・JavaScript）
- 固定ヘッダーがある場合のスクロール位置調整テクニック
- スムーススクロールがうまく動かない原因とその具体的な対処法
ページ内リンクとは？
このブログにも読みたところへジャンプできる目次を設置していますが、他にもWebサイトを閲覧していて、ナビゲーションやボタンをクリックして、「ページ内の別の場所に自動で移動した」という経験はありませんか？
それこそが「ページ内リンク」です。通常のリンクが別ページへ遷移させるのに対し、ページ内リンクとは、同じページ内の特定の位置へジャンプさせるためのリンク機能のことを指します。
この機能を使えば、長い記事でも読者が必要な情報に素早くアクセスできるようになります。結果として、サイトのユーザビリティや回遊性の向上にもつながるのが大きなメリットです。
特別なライブラリを導入しなくても、HTMLの基本的なタグだけで実装可能なので、初心者にも取り入れやすい機能です。
HTMLでページ内リンクを設定する方法
ページ内リンクを使いこなすためには、まず基本のHTML構文を理解しておくことが大切です。
ここでは、ページ内リンクの作り方を初心者にもわかりやすく、段階的に解説していきます。実際のコード例も交えながら紹介するので、コピー＆ペーストですぐに使いたい方にもぴったりです。
ページ内リンクの基本構文
ページ内リンクを設定する基本的な手順を解説します。
まずはページ内リンクのリンク先となる要素に、id属性で名前を付けます。
以下、例です。
<h2 id="about">About</h2>
注意点は、ID名はHTML内で1回しか使えないということです。同じID名を2回以上使ってしまうとページ内リンクがうまく動作しないので気をつけましょう。
次に<a>タグのhref属性にリンク先のIDを指定します。
先ほどの例のid="about"にリンクさせたい場合は以下のようにします。
<a href="#about">このページの「About」へ移動/a>
かすがhrefの方は頭に「#」つけるのを忘れずに！
ここまでを踏まえて、シンプルなページ内リンクの構成は以下です。
<a href="#about">このページの「About」へ移動</a>
<!--途中のコンテンツは省略-->
<h2 id="about">About</h2>
<p>こちらがAboutセクションの内容です。</p>
このように書くことで、「このページの「About」へ移動」を押すと、IDが「about」で指定された要素の位置までジャンプするようになります。
実際の表示例
See the Pen 「ページ内リンク」 by kasuga (@kntkfmgf-the-vuer) on CodePen.
全体のコードはこちら
HTML
<div class="container">
<a href="#about">このページの「About」へ移動</a>
<div class="space">途中のコンテンツ</div>
<h2 id="about">About</h2>
<p>こちらがAboutセクションの内容です。</p>
<div class="space">途中のコンテンツ</div>
</div>
CSS
*{
margin: 0;
padding: 0;
}
body{
background: #e4eff7;
padding: 40px;
}
.container{
margin: 0 auto;
max-width: 600px;
}
#about{
margin-top: 80px;
}
.space{
background: #fff;
height: 1000px;
margin-top: 40px;
padding: 20px;
}
表示上は特別な変化はなく、クリックした瞬間に画面がパッと移動するのが特徴です。
ただし、一瞬でリンク先にジャンプで切り替わるため、
戸惑う人何が起きたの？
と思うユーザーもいるかと思います。なのでユーザービリティ上はあまり良くないです。
この問題を解決するため、次の章でページ内リンクの「スムーズスクロール」のやり方を解説します。
HTML5になった現在では、name属性でのページ内リンクは廃止されています。まだ多くの記事でこの方法が紹介せれているので注意しましょう！
NG例
<a name="about">このページの「About」へ移動</a>
ページ内リンクをスムーズにスクロールさせる方法【コピペOK】
HTMLだけでもページ内リンクは簡単に実装できますが、ジャンプが一瞬で切り替わるため、ユーザーにとっては
戸惑う人どこに移動したのかわかりづらい
と感じることも。
このようなケースでは、スムーズスクロールを導入することで、より自然で視認性の高いユーザー体験を提供できます。
ここでは、ページ内リンクにスムーズなスクロールを実現するための具体的な方法を、
- CSS
- jQuery
- JavaScript
の3パターンで解説します。
【CSSのみでスムーズスクロールを実装する方法】
最も手軽な方法は、htmlタグにscroll-behavior: smooth;を指定するだけです。
html {
scroll-behavior: smooth;
}
このCSSを追加するだけで、ページ内リンクが滑らかにスクロールするようになります。対応ブラウザも増えており、基本的にはこれだけで問題ありません。
bodyタグではなくhtmlタグにscroll-behavior: smooth;を指定する必要があるので注意です。
対応ブラウザ（記事投稿時点）
- Chrome
- Edge
- Firefox
- Safari（※バージョン15.4からのみ対応）
かすがCSSで実装する場合はSafariのバージョン制限があるので、そこも考慮してCSSで実装するか判断した方が良いですね。
CSSでのスムーズスクロールの表示例
See the Pen 「ページ内リンク」 by kasuga (@kntkfmgf-the-vuer) on CodePen.
全体のコードはこちら
HTML
<div class="container">
<a href="#about">このページの「About」へ移動</a>
<div class="space">途中のコンテンツ</div>
<h2 id="about">About</h2>
<p>こちらがAboutセクションの内容です。</p>
<div class="space">途中のコンテンツ</div>
</div>
CSS
*{
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;/*bodyではなくhtmlに指定しないとスムーズにならないので注意*/
}
body{
background: #e4eff7;
padding: 40px;
}
.container{
margin: 0 auto;
max-width: 600px;
}
#about{
margin-top: 80px;
}
.space{
background: #fff;
height: 1000px;
margin-top: 40px;
padding: 20px;
}
かすが滑らかにリンク先に移動するので、どこに移動したかユーザーもわかって親切ですよね！
【jQueryを使ってスムーズスクロールを実装する方法】
jQueryを読み込む必要がありますが、jQueryを使うことでJavascriptより簡潔にスムーズスクロールを実装することが可能です。
以下のコードを使えば、すべてのページ内リンクに滑らかなスクロールを適用できます。
$(function() {
$('a[href^="#"]').click(function(e) {//#から始まる全てのリンクをクリックした際の処理
e.preventDefault();//リンクをクリックした際の処理をなしに
var speed = 400; // スクロール速度（ミリ秒）
var href = $(this).attr("href");//hrefの値を取得して「href」に代入する
var target = $(href === "#" || href === "" ? 'html' : href);//「href」と同じID名の要素を取得して「target」に代入する
var position = target.offset().top;//「target」の画面上からの位置を数値で取得して「position」に代入する
$('html, body').animate({scrollTop: position}, speed, 'swing');//「position」の数値までアニメーションでスクロールする
});
});
jQueryでのスムーズスクロールの表示例
See the Pen 「ページ内リンク」CSS by kasuga (@kntkfmgf-the-vuer) on CodePen.
全体のコードはこちら
HTML
<div class="container">
<a href="#about">このページの「About」へ移動</a>
<div class="space">途中のコンテンツ</div>
<h2 id="about">About</h2>
<p>こちらがAboutセクションの内容です。</p>
<div class="space">途中のコンテンツ</div>
</div>
CSS
*{
margin: 0;
padding: 0;
}
body{
background: #e4eff7;
padding: 40px;
}
.container{
margin: 0 auto;
max-width: 600px;
}
#about{
margin-top: 80px;
}
.space{
background: #fff;
height: 1000px;
margin-top: 40px;
padding: 20px;
}
jQuery
$(function() {
$('a[href^="#"]').click(function(e) {//#から始まるリンク全てをクリックした際の処理
e.preventDefault();//リンクをクリックした際の処理をなしに
var speed = 400; // スクロール速度（ミリ秒）
var href = $(this).attr("href");//hrefの値を取得して「href」に代入する
var target = $(href === "#" || href === "" ? 'html' : href);//「href」と同じID名の要素を取得して「target」に代入する
var position = target.offset().top;//「target」の画面上からの位置を数値で取得して「position」に代入する
$('html, body').animate({scrollTop: position}, speed, 'swing');//「position」の数値までアニメーションでスクロールする
});
});
jQueryを読み込む際はCDNが便利です。やり方は以下の記事で解説していますのでチェックしてみてくださいね。
【JavaScriptを使ってスムーズスクロールを実装する方法】
何か理由があってjQueryが使えない場合はJavaScriptを使う方法もあります。
以下のコードを使えば、JavaScriptでもすべてのページ内リンクに滑らかなスクロールを適用できます。
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth' });
}
});
});
Javascriptでのスムーズスクロールの表示例
See the Pen 「ページ内リンク」jQuery by kasuga (@kntkfmgf-the-vuer) on CodePen.
全体のコードはこちら
HTML
<div class="container">
<a href="#about">このページの「About」へ移動</a>
<div class="space">途中のコンテンツ</div>
<h2 id="about">About</h2>
<p>こちらがAboutセクションの内容です。</p>
<div class="space">途中のコンテンツ</div>
</div>
CSS
*{
margin: 0;
padding: 0;
}
body{
background: #e4eff7;
padding: 40px;
}
.container{
margin: 0 auto;
max-width: 600px;
}
#about{
margin-top: 80px;
}
.space{
background: #fff;
height: 1000px;
margin-top: 40px;
padding: 20px;
}
jQuery
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth' });
}
});
});
かすがjQueryよりコードが複雑になってしまいますが、こちらもマルっとコピペで動きますよ！
よく使われる実装パターンを紹介
見たい人基本はもういいから実際に使えそうなやつが見たいんだけど…
かすがはい、そうすよね。了解です！
ではここで実際によく使われるパターンでの実装例を見ていきましょう。
LPでよくある、ナビゲーションをクリックすると該当のセクションへ移動するのと、ページの右下にトップへ戻るボタンを追従させています。
よく使われる実装パターンの表示例
See the Pen 「ページ内リンク」よく使われる実装パターン by kasuga (@kntkfmgf-the-vuer) on CodePen.
全体のコードはこちら
HTML
<div id="top" class="container">
<header class="header">
<div class="header_logo">
<img src="https://life-design-day.com/wp2/wp-content/uploads/2025/08/logo.webp" alt="Life Design DAY">
</div>
<nav class="header_nav">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#service">Service</a></li>
<li><a href="#company">Company</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main class="main">
<section id="about" class="sec">
<h2 class="sec_title">About</h2>
<a href="#top" class="sec_btn">トップへ戻る ▲</a>
</section>
<section id="service" class="sec">
<h2 class="sec_title">Service</h2>
<a href="#top" class="sec_btn">トップへ戻る ▲</a>
</section>
<section id="company" class="sec">
<h2 class="sec_title">Company</h2>
<a href="#top" class="sec_btn">トップへ戻る ▲</a>
</section>
<section id="contact" class="sec">
<h2 class="sec_title">Contact</h2>
<a href="#top" class="sec_btn">トップへ戻る ▲</a>
</section>
</main>
<footer class="footer">@Life Design DAY</footer>
<a href="#top" class="pagetop">▲</a>
</div>
CSS
/*共通CSS*/
*{
margin: 0;
padding: 0;
}
body{
background: #e4eff7;
}
/*header*/
.header{
align-items: center;
background: #fff;
display: flex;
justify-content: space-between;
padding: 20px;
position: sticky;
top: 0;
}
.header_logo img{
height: 30px;
width: auto;
}
.header_nav ul{
display: flex;
gap:40px;
}
.header_nav li{
list-style: none;
}
.header_nav a{
color: #0272fc;
text-decoration: none;
}
/*main*/
.main{
display: flex;
flex-direction:column;
gap:200px;
margin: 80px auto 0;
max-width: 1000px;
padding: 0 40px;
}
.sec{
width: 100%;
}
.sec_title{
background: #0272fc;
border-radius: 5px;
color: #fff;
padding: 10px;
text-align: center;
}
.sec_btn{
background: #ccc;
border-radius: 5px;
color: #0272fc;
display: block;
font-weight: bold;
margin-top: 40px;
padding: 10px;
text-align: center;
text-decoration: none;
}
/*footer*/
.footer{
color: #60b6ff;
margin-top: 1000px;
padding: 100px;
text-align: center;
}
/*pagetop*/
.pagetop{
background: #fff;
border-radius: 50%;
bottom: 20px;
color: #0272fc;
display: block;
line-height: 60px;
position: fixed;
right: 20px;
text-align: center;
text-decoration: none;
width: 60px;
}
jQuery
$(function() {
$('a[href^="#"]').click(function(e) {//#から始まるリンク全てをクリックした際の処理
e.preventDefault();//リンクをクリックした際の処理をなしに
var speed = 400; // スクロール速度（ミリ秒）
var href = $(this).attr("href");//hrefの値を取得して「href」に代入する
var target = $(href === "#" || href === "" ? 'html' : href);//「href」と同じID名の要素を取得して「target」に代入する
var position = target.offset().top;//「target」の画面上からの位置を数値で取得して「position」に代入する。
$('html, body').animate({scrollTop: position}, speed, 'swing');//「position」の数値までアニメーションでスクロールする
});
});
気づいた方もいると思いますが、上のコードでは目的地にスクロールした際にヘッダーがタイトルに被ってしまって分かりにくいですよね…。
悩む人というかこれはダサい…。
かすがそうすよね…。これはイカンですよね。直しましょう！
次の章でヘッダーに隠れてしまう場合の対応をしていきます。これで完成です。
固定ヘッダーに隠れてしまう場合の対応
jQueryに2行追加するだけで固定ヘッダーに隠れてしまう場合の対応ができてしまいます。
さらにヘッダーのデザインが変わって高さが変化しても、jQrueryで動的に高さを取得して対応するので、一度このコードを書けば基本はもう追加対応不要です。
$(function() {
$('a[href^="#"]').click(function(e) {//#から始まるリンク全てをクリックした際の処理
e.preventDefault();//リンクをクリックした際の処理をなしに
var speed = 400; // スクロール速度（ミリ秒）
var header = $('.header').outerHeight();//ヘッダーの高さを取得して「header」に代入する
var href = $(this).attr("href");//hrefの値を取得して「href」に代入する
var target = $(href === "#" || href === "" ? 'html' : href);//「href」と同じID名の要素を取得して「target」に代入する
var position = target.offset().top - header;//「target」の画面上からの位置を数値で取得して「position」に代入する。さらにheaderの高さを引くことで、headerに隠れてしまうのを防ぐ
$('html, body').animate({scrollTop: position}, speed, 'swing');//「position」の数値までアニメーションでスクロールする
});
});
ヘッダーの高さを数値で入れている記事をいくつか見ましたが、それだとヘッダーの高さが変わるたびにjQueryのコードも修正する必要があり、メンテ性が良くないです。
固定ヘッダーに隠れてしまうを解消した表示例
See the Pen 「ページ内リンク」よく使われる実装パターン by kasuga (@kntkfmgf-the-vuer) on CodePen.
スムーズスクロールがうまく動かないときの原因と対処法まとめ
スムーズスクロールの実装は比較的シンプルですが、
悩む人コピペしたのに動かない
悩む人思った通りにスクロールしてくれない
といったトラブルが起きることもあります。
ここでは、よくある原因とその対処法を3つのポイントに分けて解説します。初心者の方でもチェックしやすいように、トラブルシューティングの手順も具体的にご紹介します。
HTMLの記述ミス（hrefやID名の指定ミス）
まず最も多いのが、hrefやID名の指定ミスです。
【よくあるミス例】
- href=”#section1″ と書いたのに、リンク先の要素に id=”section1″ がついていない
- hrefに「#」がついていない（例：href=”section1″）
- id名にも「#」をつけてしまっている（例：id=”#section1″）
- id のスペルミス（例：ID=やId=になっている）
- 複数の要素に同じ id を付けてしまっている（id はHTML内で1回しか使用できません）
【対処法】
- href=”#●●” に指定した名前と、id=”●●” を完全に一致させる
- HTML構造を見直し、IDの重複がないかを確認する
スクリプトエラー
スクリプトエラーを起こしている場合もページ内リンクが機能しません。
【よくあるミス例】
- jQueryの場合、jQuery本体が読み込まれていない
- jQuery本体の読み込みより前にjQueryのコードを書いてしまっている
- スムーズスクロールのコードにエラーがある
- スムーズスクロールのコードより前にエラーがあり、そこで処理が止まってしまっている
【対処法】
ブラウザのデベロッパーツールでコンソールにエラーメッセージが出ていないかチェックしてみましょう。
ブラウザや環境によって動かない
CSSのscroll-behavior: smooth;は便利ですが、safariの一部バージョンで無効になる場合があります。このようにブラウザや閲覧環境によってもページ内リンクが機能しない場合があります。
【確認ポイント】
- 対応ブラウザかどうか（scroll-behavior: smooth;はsafariの一部バージョンで非対応です）
- ブラウザの拡張機能（アドブロックなど）がJavaScriptの動作を妨げていないか
【対処法】
- CSSの非対応ブラウザも考慮するのであれば、jQueryやJavaScriptでの処理に切り替える
- スクリプトは基本的に</body>タグの直前に書くことで、HTML要素が読み込まれた後に実行されるようにする
まとめ：ページ内リンク×スムーズスクロールでUXを劇的に向上させよう！
ページ内リンクは、一見すると地味な機能に思えるかもしれません。
しかし、ユーザーにとっては「必要な情報へ素早くたどり着ける」という大きなメリットがあり、読みやすいサイト設計には欠かせない要素です。
そこにスムーズスクロールを加えることで、ただのジャンプではなく、視線の流れを意識した自然な移動が可能になります。これにより、ページ全体のUX（ユーザー体験）は格段に向上します。
最後にこの記事の要点をまとめます。
- ページ内リンクとは
同一ページ内の特定の位置へジャンプできるHTMLの基本機能です。 - 基本構文
<a href=”#◯◯”>リンク</a>とid=”◯◯”を一致させるだけで、初心者でも簡単に実装できます。 - ページ内リンクをスムーズにスクロールさせる
クリック時に滑らかに移動してUXが大幅に向上します。 - スクロールが動かない場合の対処法
IDミスや読み込み順、jQuery Mobileの仕様などを丁寧に確認することが大切です。
かすが最後まで読んでいただきありがとうございました！以下のおすすめ記事もチェックして見てくださいね！
まだブログを始めていない方は以下の記事をぜひチェック！
ブログを始めたばかりの人は以下の記事をぜひチェック！
