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

2021.09.15

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

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を使う
  • scroll-behaviorプロパティを使う

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

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プロパティでも、実現可能ですが、細かい指定ができないなどの制限があります。

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

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

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

PAGE TOP

© 2021 WEBCAMP MEDIA Powered by AFFINGER5