【jQuery入門】ページ内リンクを滑らかにスムーズスクロールする方法【コピペOK】

HikoPro

こんにちは！大学生クリエイターでWebライター｜エンジニア｜YouTuberとして活動していますHikoProです！最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています！

WebサイトやLP（ランディングページ）でページ内リンクをクリックすると、スムーズに画面がスクロールしジャンプさせたい！
コピペでもできる方法を教えて！

今回の記事ではJavaScriptのライブラリjQueryを使ってコピペOKのスムーズスクロールの方法を解説します！

スムーズスクロースのイメージが湧かない方はこちらのボタンをクリックしてみてください！

クリックして下にスクロールジャンプ！

いかかでしょうか！？実装したい動きと同じならこのまま読み進めてください！

JavaScriptやjQueryの知識が全くない方でも、このスムーズスクロールは実装可能なので、ぜひこの記事を読みながら手を動かしてみてください！

✔︎こんな方にオススメ

ページ内リンクをスムーズにスクロールさせたい方
コピペで、滑らかにスクロールさせたい方
JavaScript、jQueryの知識はないがスムーズスクロールをやりたい方

Hiko

実際にエディタを開いてコーディングしていきましょう！

jQueryでスムーズスクロールをする方法

「とっととコピペOKで実装させてくれ！」と思われる方も多いと思いますので、下記に2つのコードを用意しました。

↓こちらのコードを<head>タグの間にコピペしてください↓

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

↓こちらのコードを</body>直前にコピペしてください↓

<script>
$(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;
  });
});
</script>

ネコ君

おおー！これだけでスムーズにスクロールされたよ！

たったのこれだけでページ内リンクのスクロールを滑らかにスムーズスクロールすることができます。

もうお分かりの方は多いと思いますが、hrefの中はジャンプさせたいIDに紐づけるようにしてください！

<a href="#end">最後にジャンプ！</a>

← hrefの中は「# + IDの名前」をつけよう！

<div id="end">
<p>ここに飛ぶよ！</p>
</div>

← ジャンプさせたい場所にidを付ける！

コピペでjQueryでのスムーズスクロールを実装しましたが、詳しく知りたい方もいるかと思うので、一つずつ解説していきます！

✔︎この先を読むと出来る事

jQueryのスムーズスクロールの仕組みがわかる
ソースコードの意味が理解できる
スクロール速度を調整できる（早く＆遅く）
その他の応用が効く

jQueryを使えるようにする

まず始めにスムーズスクロールを実装するにはjQueryが使われているので、jQueryを使える環境にします。

方法は2つあり、、、

jQueryファイルをダウンロードしてパスを通す
ダウンロードせずにCDNを使用する

jQueryファイルをダウンロードしてパスを通す方法は、https://jquery.com/download/ まずこちらにアクセスして、一番上の「Download the compressed, production jQuery 3.4.1」をダウンロードします。

<head>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
</head>

そして、CSSファイルを読み込むと同じように<head>内に記述すればOKです。

もう一つCDN（コンテンツデリバリネットワーク）を使ってjQueryを使う方法ですが、CDNはダウンロードとは違い、GoogleやjQueryがすでにサーバーにアップしたデータを使用する方法です。

このようにGoogleやMicrosoftのCDNを使用することができます。

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

先ほども解説しましたが、このコードをそのまま<head>内にコピペすればOKです！

2行目：$(‘a[href^=”#”]’).click(function(){と書く

jQueryを使えるようになったら、スムーズスクロールを実装するコードを書いていきます。

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

まずは「ページの読み込みが終わったらjQueryを実行する」という意味の、$(function(){ と書き、2行目に上記のコードをコピペします。

このコードの意味は、「＃から始まるアンカータグをクリックしたら、以下の処理を実行してね！」という意味になります。

つまりこの下に、スムーズスクロールの実行処理を書いていくということです。

３行目：var speed = 500;でスクロールの速さ調整

次にスムーズスクロールで画面をスクロールする速さを調節するコードを書いていきます。

 var speed = 500;

500=500ミリ秒=0.5秒

500がだいたい標準ですが、長いLPとかだったら400がいいかと思います。

数字が小さい：早くなる
数字が大きい：遅くなる

このスピードの調整はできるようにしておきましょう！

４行目：var href= $(this).attr(“href”); でリンク先を取得

var href= $(this).attr("href");

4行目のソースコードは特にいじる必要なないですが、「リンクをクリックした時のジャンプ先を取得する」という意味になります。

取得した値をhrefオブジェクトに代入しています。

５行目：空白or#のみだったらリンク先を「html」に設定

var target = $(href == "#" || href == "" ? 'html' : href);

5行目のこのコードの意味は、「もしリンク先が#のみ、もしくは、空白の場合はリンク先をhtmlに設定してね！」という意味になります。

例えば TOP というリンクがあったとして、ページの先頭にジャンプさせたい場合はhrefに空白か#を付けてあげるとOKです。

６行目：リンク先の座標を取得する

var position = target.offset().top;

次に6行目のこちらのコードですが、「リンク先までの距離（座標）を取得し positionオブジェクトに値を代入する」という意味になります。

こちらも特に変更する必要はありません。

7行目：スムーズスクロールを実行

 $("html, body").animate({scrollTop:position}, speed, "swing");

最後にこれまでtargetやspeedオブジェクトに代入した値を実行し、スムーズスクロールを実行するコードを書きます。

Hiko

これで、スムーズスクロールの解説は以上です！

まとめ

いかがでしたでしょうか！

たったこれだけの記述で、スムーズスクロールを実装でき、ネコ君も言っていたように、ユーザーの利便性も高まるのでぜひ実装するようにしましょう！

最後までご覧いただきありがとうございました！

IT・テクノロジーで生活と仕事をもっと豊かに