HTMLのページ内リンクをスムーズスクロールさせる方法とは？jQueryのコードとともに解説

ページ内リンクのクリックで、滑らかにスクロールするページを見たことはありませんか？

HTMLを使って実装したいと思っても、何だか難しそうで手を出しにくいですよね。

今回は、HTMLを使ってページ内リンクをスムーズにスクロールさせたいという方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、HTMLでページ内リンクをスクロールさせる方法が分かるようになりますよ。

ぜひ最後まで読んでくださいね！

ページ内リンクとは何か？HTMLの記述方法を説明

ページ内リンクとは、同じページ内の指定場所に移動するリンクのことです。

ページトップへ移動するときや、目次から各項目にジャンプするときなどに活用されます。

スクロールの手間を省いて、目的の場所に移動させることで、ユーザーの利便性を高めることができますね。

ユーザーが読みやすいページを作ることで、ページ閲覧の時間が増えたり、直帰率が減ったりというSEOの面でも良い効果が期待できます。

では、実際にページ内リンクを設置するには、どのように記述すれば良いのでしょうか？

ページ内リンクは、他のページへ移動するリンクと同様に、a要素を用いて記述します。

移動先の場所には、要素の中にid属性を記述し、先ほどのリンクのhref属性と値を合わせます。

<a href="#jump">ページ内リンク</a>
<p>他の要素</p>
<h2 id="jump">ページ内リンクの移動先</h2>

上記コードでは、ページ内リンクをクリックすると、下の見出しの位置までジャンプします。

移動先の要素のid属性に、任意の値（今回は「jump」）を指定します。

a要素のhref属性には、この値の先頭に「#」を付けたものを指定します。

HTML5以前のHTMLでは、ページ内リンクの移動先の要素にid属性ではなく、name属性を利用していました。

現在も引き続き、name属性の指定でも機能しますが、HTML5では非推奨となっていますので、id属性で指定を行いましょう。

コンテンツが少ないと分かりづらいですが、リンクをクリックすると、一瞬で見出しの位置に移動することができます。

コンテンツによっては、簡単なテキストリンクだけでは物足りないと思いますので、CSSを使って、サイトに合わせたデザインをしてみてくださいね。

他のリンクと同様に、ボタンのページ内リンクをデザインして設置しているサイトも多いですよ。

スムーズスクロールを実装するには？

前述のコードのみでは、一瞬でその位置にジャンプしますね。

滑らかにスクロールさせる動きを実装したい場合には、どのようにしたら良いのでしょうか？

方法は主に2つあります。

それぞれの方法を説明していきましょう。

jQueryを使う

jQueryとはJavaScriptライブラリの1つで、JavaScriptより簡単な記述でプログラムを実装することができます。

jQueryを利用するには、公式ページからファイルをダウンロードするか、CDNを読み込む必要があります。

CDNとは、容量の大きいコンテンツをインターネット上で配信する仕組みのことです。

CDNを使い、jQueryファイルを読み込むには、HTMLに以下を記述します。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

上記コードの後に、スムーズスクロールのコードを記述します。

jQueryを読み込んだ後でないと、きちんと動作しないので、必ず後に記入しましょう。

$(function(){
  $('a[href^="#"]').click(function(){
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});

最初の、「$(function(){」を使ってjQueryの無名関数であることを宣言します。

a要素のhref=”#”をクリックしたときの処理を実装するために、「$(‘a[href^=”#”]’).click(function(){」と記述し、以降に処理の中身を書いていきましょう。

varは、JavaScriptで変数を宣言する際に使います。

スクロールの速さをspeedに代入しておきます。

「$(this).attr(“href”)」では、a要素のhref属性の値を取得しており、これをhrefに代入します。

「$(href == “#” || href == “” ? ‘html’ : href」は、条件(三項)演算子で、href属性の値が「#」と同じであるか、空である場合にhtmlを代入します。

そうでない場合には、変数hrefを代入します。

「target.offset().top」では、画面上部からtargetまで距離を取得します。

最後に「$(“html, body”).animate({scrollTop:position}, speed, “swing”);」を使って、positionの位置まで、speedの速度（ミリ秒）でHTML全体をアニメーション表示でスクロールさせます。

swingは、スクロールする際の挙動の指定です。

最初と最後は緩やかで、途中は速めに移動します。ここをlinearと指定すると、常に一定の速さになりますよ。

固定ヘッダーに隠れてしまうのを防ぐ方法

スクロールに追従している固定ヘッダーがある場合、リンク先の要素の上部がヘッダーに隠れてしまいます。

これを防ぐために、スクロールの位置を調整する方法を紹介しましょう。

スクロールした際の移動先を、固定ヘッダーの高さだけ下にずらすとちょうど良く表示されます。

//ヘッダーの高さを取得
var header = $('header').height();
//ヘッダーの高さを引く
var position = target.offset().top - header;

「$(‘header’).height()」で、ヘッダーの高さを取得し、headerに代入します。

元々の移動先から、ヘッダーの高さ分だけ引いてpositionに代入します。

こうすることで、固定ヘッダーに隠れないスムーズスクロールができるようになりました。

上記以外の部分のコードはそのままです。

ページ内リンクが機能しない場合の対処法

ページ内リンクが機能していない場合、まず見直すべきところは、id属性とhref属性の値です。

ここが正しく指定されていないと、リンク先へ移動しません。

属性値は問題ない、という場合、他に使用しているJavaScriptのフレームワークやライブラリが邪魔をしている可能性があります。

他のスクリプトを無効にするなどして、どれが原因になっているのか確かめてみてください。

原因が分かったら、無効のままにするか、対策用のスクリプトを書くことで解決することができます。

scroll-behaviorプロパティを使う

JavaScriptライブラリのjQueryを使う他に、CSSのscroll-behaviorプロパティを使用する方法があります。

CSSファイルの中に、

html {scroll-behavior: smooth;}

と記述するだけで、簡単にスムーズスクロールを実装することができます。

ページ内リンクだけでなく、別のページのリンク先にも滑らかに移動します。

<!––同じページ内のリンク––>
<a href="#jump01">リンク</a>
<!––別のページへのリンク––>
<a href="sample.html#jump02">リンク</a>

対応ブラウザには注意する必要がありますが、1行で済むので、jQueryを使うほどではないというときには重宝しますね。

ただ、スクロールのスピードや高さ調整などの指定はできないので、細かい指定をしたいのであれば、前述のようにjQueryを使う必要があります。

まとめ：ページ内リンクのスムーズスクロールにはjQueryが便利

今回は、HTMLを使って、ページ内リンクへスムーズスクロールさせる方法を解説しました。

スムーズスクロールさせたい場合には、jQueryを活用するという話でしたね。

CSSのscroll-behaviorプロパティでも、実現可能ですが、細かい指定ができないなどの制限があります。

対応ブラウザも調べておいた方が良いでしょう。

ページ内リンクの移動をスムーズスクロールさせる際に、今回の記事が参考になれば幸いです。