jQueryを使ってページ内リンクを
スムーススクロールにする設定と特定リンクの除外方法

2023.10.11
2021.08.15

JavaScript・jQuery

jQueryを使ってページ内リンクをスムーススクロールにする設定と特定リンクの除外方法

以前に、スムーススクロールをCSSだけで設定する方法について解説しましたが、今回はCSSではなくjQueryを使って、ページ内リンクをクリックした際にスムーススクロールとして動く設定を見ていきたいと思います。

CSSだけ！scroll-behaviorでページ内リンクのスムーススクロールの設定: もはや今のサイト制作において定番中の定番と言ってもいいくらいに極々当たり前になってきている感のあるスムーススクロールですが、実は今の時代ではCSSだけ...

CSSのみの設定は非常にシンプルで簡単な反面、使うに当たっての細かい設定ができずなところもありましたので、そういったサイトには今回のjQueryを使ったスムーススクロールを設定していくのがおすすめです。

CSSのみで設定する分との違いなどを含め、jQueryを使ったスムーススクロールについて見ていきましょう。

この記事の目次

実際のスムーススクロールを設定するコード

それでは実際に設定するコードについて見ていきましょう。

HTMLのコード

今回はjQueryを使っての設定になりますので、jQueryの読み込みが必要になります。
昔はjQueryをダウンロードして自分たちのサーバーにアップして使う事が多かったですが、今はCDNを使って読み込むのがオススメです。

CDNについては別記事で解説していますが、今回は個人的にもよく使わせてもらっているGoogleのCDNを使う形で紹介していきたいと思います。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

昔はこのjQueryを使う際は、<head>タグの上の方に書かれることが多かったですが、多少なりともファイルは重いため、今は</body>タグの直前など、なるべく最後で読み込むのが推奨されています。

ただ注意点として、jQueryを使った設定などのスクリプトはjQueryを読み込んだ後でないと正常に動作しないため、読み込む順番などは注意する必要があるため下記でも解説していますので合わせてご確認ください。

jQueryの読み込み。CDNを使う方法とコードを書く場所や読み込む順番: jQueryと言えば、Webサイト制作においては非常に重宝され無くてはならないとまではいかなくとも多くのサイトで使われているものになります。脱jQu...

実際のjQueryのコード

では次に、jQueryのためのJavaScriptのコードを見ていきましょう。

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

実際にはほとんど呪文と思ってそのままコピペしたら即使えますが、一応コードのそれぞれを解説してみたいと思います。

$('a[href^="#"]').click(function(){

ここで、#で始まるa要素をクリックした場合の処理をするという事になります。#で始まる＝アンカーリンクとなるため、ページ内リンクの設定をするという意味になります。

1点注意点としては、#を、""（ダブルクォーテーション）で囲むようにしましょう。囲まなくても正常に動作することもありますが、jQueryのバージョンによってはダブルクォーテーションが無いと動かないケースがあるので、入れておくようにしましょう。

const adjust = 0;
const speed = 700;

文字を見るとわかりますが、ここでスクロールした先の高さの調整と、スクロールする速度の調整をしています。

adjustの高さは、通常であれば0で問題ありませんが、例えばヘッダーを固定化して使う場合、ページ内リンクでスクロールした場合、ヘッダーの高さ分ずらして移動しなければいけないため、そういった移動した際に高さをプラスしたい時にその数値を設定しています。

adjustは先ほどの全体コードの7行目にて、スクロール時に設定した高さ分だけネガティブマージンを設定するように書かれています。

speedはミリ秒表示で設定をします。数字を減らせば減らすほど移動速度が速くなり、数字が増えれば増えるほど移動速度がゆっくりになります。だいたい、400～700程度が多いのではないかと思います。

const href= $(this).attr("href");
const target = $(href == "#" || href == "" ? 'html' : href);
const position = target.offset().top - adjust;
$('body,html').animate({scrollTop:position}, speed, 'swing');

あとはもうほとんど変更する事はありません。
1行目でリンク先の（href）を取得してそれを、hrefという変数に代入し、2行目ではリンク先のhrefからidが付けられている要素を探し、targetという変数に代入しています。

そして、3行目ではidの要素の位置をoffset()で取得して、そこに先ほど設定したadjustの高さ分を設定してpositionという変数に代入し、最後でスムーススクロールの設定をしているという形になっています。

厳密に言えば変数の値はそれぞれ変える事ができますが、ネット上の多くの解説でもadjust、speed、href、target、positionという変数名で付けられる事が多いので、あえて独自の変数名にしない方がなんとなくわかりやすいかと思います。

実際、この設定を書いたデモページが下記でご確認いただけます。

デモページ

CSSでの設定の違い

前回、CSSでのスムーススクロールの設定などについても解説しましたが、CSSと今回のjQueryの違いというのは、CSSでのデメリットを解消するという形になっています。

特定のリンクの除外ができる（別途設置が必要＆後述）
移動の速度を調整できる（speedで設定）
リンククリック時に#が付与されない
移動先の位置調整ができる（adjustで共通設定＋css個別設定）

といったように、CSSでスムーススクロールを設定する分のデメリットのほとんどがこちらで解消できる形になります。

特に、1つめの特定のリンク除外ができるというのは、別のjQueryのスクリプトなどを使ったりしている場合や、ブログなどで目次を使っている場合の目次を閉じるボタンなどは#で設定されているため、こちらの設定でないと正常に動作しなくなる可能性があります。

最後にその特定のリンク時には動作しない設定についても見ておきましょう。

特定のリンクを除外した設定をする場合

最初に書いたコードでは、下記のように書いているため、aで書かれた全てのリンクにスムーススクロールの設定がいわば強制的に付与されてしまいます。

$('a[href^="#"]').click(function(){

ですが、「#」が付いていたとしても、アンカーリンクとして使いたくないケースが存在します。

例えば、よくあるケースだと、jQueryの別のスクリプトの設定で#を使って動きを与えていたり、ブログなどのプラグインで目次系のものを使っている場合、目次を開く・閉じる系のボタンはプラグインによっては、#のリンクが使われていたりもします。

そういった場合は、上記のスムーススクロールのコードを設定すると、他の設定を無視して目次を開く・閉じるの動作とともに、ページの一番上に移動してしまうということにもなってしまいます。

そのためそういうシチュエーションでは、特定のリンクにはスムーススクロールの設定を反映しないという除外ルール的な設定が必要となり、上記のコードに少し改変をすることで、無視するクラス名を設定し、aタグにそのクラス名が付いていないものに限り反映するというルールを付け加えることで解決します。

$('a:not(.nosmooth)[href^="#"]').click(function(){

この設定を入れることで、.nosmoothのクラス以外で#が付いたリンクという事になり、.nosmoothが与えられた#の付いたaタグのリンクはスムースリンクのjQueryの設定が反映されずスルーされる事になります。

また、複数のクラスを設定したい場合は、クラスをカンマで区切って設定すれば複数指定も可能です。

$('a:not(.nosmooth, .hogehoge, .samplesample)[href^="#"]').click(function(){

jQueryを使ったタブメニューだったり、画像のスライドショーや何かしらのスクリプトなどでアンカーリンクを使うものなどの場合は、こういった除外を同時に設定しておくことでスムースリンクが発動しないようになります。

実際、先ほどのデモページのリンクの最後のセクション5へのリンクと、そのセクション5のページトップへ戻るのリンクには、.nosmoothのクラスを与えているため、今回のjQueryでのスムーススクロールの設定は反映されていません。

そのためリンクをクリックしても、アンカーリンク自体は設定されているので移動はしますが、スムーススクロールは発動されず、URLもセクション5のリンクのみ、#が付いたURLに変わるようになっています。

デモページ

まとめ

スムースリンクは最近の流れでは動きがあるサイトが好まれる傾向が強いので、多くのサイトで設定されているように思います。

CSSのみで動くスムースリンクとは違いjQueryを使っての設定は多少のコードが必要ではありますが、細かな設定など色々とできるので、なんだかんだで今もこの設定が多くのサイトで使われていますし、自分自身、実務ではこの設定を使っています。

デフォルト状態だけですと、全リンクに反映されてしまうため他のスクリプトの設定などで#を使ったリンクなどが使われる場合はしっかりと除外設定のルールも設定して活用していくようにしましょう。

記事のシェアにご協力お願いします

2023.10.11
2021.08.15