おにちゃん塾の商品一覧*準備中

【jQuery入門】ページ内リンクでスムーススクロールを実装する方法

【jQuery入門】ページ内リンクでスムーススクロールを実装する方法
URLをコピーする
URLをコピーしました!
  • スムーススクロールについて詳しく知りたい
  • jQueryでのスムーススクロール実装方法

本記事では上記の悩みを解決することができます。

おにちゃん

スムーススクロールは頻出の技術ですので、必ず覚えるようにしましょう。


本記事の内容

  • スムーススクロールとは
  • jQueryでスムーススクロール実装
おにちゃん

現在はjQueryだけですが、今後WordPressやcssなども追加していきます。

(スポンサーリンク)

目次

スムーススクロールとは

スムーススクロールとは
スムーススクロールとは

スムーススクロールとは、ページ内アンカーにスクロールで移動する技術です。

多くのWebサイトで実装されています。

スムーススクロール実装方法
  • CSS
  • JavaScript
  • jQuery

多くのサイトではjQueryでの実装がスタンダードなので、本記事もjQueryを中心に解説していきます。


【jQuery入門】スムーススクロールの実装方法

【jQuery入門】スムーススクロールの実装方法
【jQuery入門】スムーススクロールの実装方法

jQueryでのスムーススクロールの完成品は下記のようになります。

まずは完成品のコードを御覧ください。

<body>
 <section>
   <p><a href="#link">出発地点</a></p>
   <p id="link">到着地点</p>
 </section>
 
 <script>
$(function(){
 $('a[href^="#"]').click(function(){
   let speed = 500;
   let href= $(this).attr("href");
   let target = $(href == "#" || href == "" ? 'html' : href);
   let position = target.offset().top;
   $("html, body").animate({scrollTop:position}, speed, "swing");
   return false;
 });
});
 </script>
</body>
section p {
 height: 800px;
}

それでは、実際にコードを見ていきましょう。


jqueryの実行環境を整える

jqueryには2つほど準備する方法があります。

  • ダウンロード
  • CDN

今回はCDNを活用してjQueryの実行環境を準備していきます。→簡単にできる

  • Google CDN
  • Microsoft CDN
  • CDNJS
  • jsDelivr CDN

本記事含め、色々なサイトではGoogleを使用するケースが多いです。

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


htmlに実装してみよう

出発地点にはaタグを使用します。

a href=”#link(飛びたい所のid)”
p id=”link”


2行目のコード解説

$(function(){});を書くことで、ページ読み込み後にjqeuryを実行することができます。

$(‘a[href^=”#”]’).click(function(){});の部分では「aタグの中で#のあるものをクリックしたら、以下のコードを実行させてね」という意味

ここからスムーススクロールに重要な箇所を記述していきます。


3行目のコード解説

let speed = の部分で、スムーススクロールの速度を変更させることができます。

僕個人的には400を使いますが、スタンダードは500です。

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

スムーススクロールのスピードを弄りたい時はこの数字を変えてみてください。


4行目のコード解説

4行目のattrの部分では、クリックされたページスクロールのhrefを取得しています。

今回は#linkを取得しています。

「クリックされたリンクのジャンプ先をゲットする」


5行目のコード解説

4行目の変数hrefを使って、ジャンプ先のidをゲットするコードです。

その値を変数targetに代入しています。


6行目のコード解説

ジャンプ先であるidの座標を変数に代入しています。

今回で言うと、id#linkの座標を変数positionに代入しているのです。


7行目のコード解説

最後のコードでは、これまで作成してきた変数を活用してスムーススクールを完成させています。


まとめ:スムーススクロールの実装方法

まとめ:スムーススクロールの実装方法
まとめ:スムーススクロールの実装方法

ここまでで『【jQuery入門】ページ内リンクでスムーススクロールを実装する方法』の解説は以上です。

おにちゃん

本記事は以上です。最後までご覧下さりありがとうございました。


読者におすすめの記事

【jQuery入門】ページ内リンクでスムーススクロールを実装する方法

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる