HikoPro Blog

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

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

約7分
About|HikoPro

About|HikoPro

1998年生まれ|ITライフクリエイター
Webクリエイター|YouTuber|Blogger

学生時代は、タイピングのテストでクラス最下位レベルのパソコン音痴。
もっと自分の市場価値を高めたいと思い、、、
▷バンコク不動産▷インドIT留学▷ベトナムIT企業エンジニアを経て
フリーランスエンジニアとして独立。

その後もっと大きい市場でインパクトのあることをしたいと思い、
ITメガベンチャーに就職を決意。

#GoProAwards受賞 #14ヵ国渡航 #Z大学創業者 #ネコ好き

YouTube

I make videos of computer hack information and useful applications that
enrich people's work and life.


PC Hack

Web Create

Life Style

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

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

  • 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

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

まとめ

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

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

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

Leave A Reply

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)