ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

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

JavaScript&jQuery
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
Adobeの期間限定セール開催中

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

WebサイトやLP(ランディングページ)でページ内リンクをクリックすると、スムーズに画面がスクロールしジャンプさせたい!

コピペでもできる方法を教えて!

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

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

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

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

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

こんな方にオススメ
  • ページ内リンクをスムーズにスクロールさせたい方
  • コピペで、滑らかにスクロールさせたい方
  • JavaScript、jQueryの知識はないがスムーズスクロールをやりたい方
Hiko
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行目に上記のコードをコピペします。

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

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

スポンサーリンク

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

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

 var speed = 500;

500=500ミリ秒=0.5秒

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

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

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

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

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

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

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

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

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

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

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

6行目:リンク先の座標を取得する

var position = target.offset().top;

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

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

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

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

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

Hiko
Hiko

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

まとめ

ネコ君
ネコ君

スムーズスクロールするだけで、ユーザーに同じページにいるんだよ!

と、気づかせる事ができるからぜひ導入しよう!

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

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

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

HikoPro
HikoPro

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

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
JavaScript&jQuery
HikoPro Blog

コメント

タイトルとURLをコピーしました