【jQuery】要素をクリックして指定位置まで自動スクロールする方法。コピペできます。

ワダショウゴ

2020年10月30日 09:40

こんにちは、ワダショウゴです。

本記事では、jQueryを使って特定の要素をクリックすると指定位置まで自動スクロールする方法について解説します。

LP制作案件でよく使われるので重宝します。

jQueryで自動スクロールを実装

使用するのは下記の2つです。それぞれを同じディレクトリ内に保存してください。

♦Code01（HTML）

<!DOCTYPE html>
<html lang="ja" dir="ltr">
   <head>
       <meta charset="utf-8">
       <title>jQuery</title>
       <!-- scripts -->
       <!-- jQuery -->
       <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous" defer></script>
       <!-- Style JS -->
       <script src="style.js" defer></script>
   </head>
   <body>
       <nav>
           <ul>
               <li id="#nav1" class="scroll-btn">Menu01</li>
               <li id="#nav2" class="scroll-btn">Menu02</li>
               <li id="#nav3" class="scroll-btn">Menu03</li>
               <li id="#nav4" class="scroll-btn">Menu04</li>
               <li id="#nav5" class="scroll-btn">Menu05</li>
           </ul>
       </nav>
       <br><br><br><br><br><br><br><br><br><br>
       <div id="nav1">Menu01</div>
       <br><br><br><br><br><br><br><br><br><br>
       <div id="nav2">Menu02</div>
       <br><br><br><br><br><br><br><br><br><br>
       <div id="nav3">Menu03</div>
       <br><br><br><br><br><br><br><br><br><br>
       <div id="nav4">Menu04</div>
       <br><br><br><br><br><br><br><br><br><br>
       <div id="nav5">Menu05</div>
       <br><br><br><br><br><br><br><br><br><br>
       <br><br><br><br><br><br><br><br><br><br>
   </body>
</html>

♦Code02（jQuery）

$('.scroll-btn').on('click', function(){
   var id = $(this).attr("id");
   var position = $(id).offset().top;
   $('html,body').animate({
       scrollTop: position
   }, 500);
   return false;
});

ソースコードの解説

Code01についてですが、li要素についてそれぞれidとscroll-btnというclassを与えます。

あとは、クリックしたli要素に対してスクロールさせたい要素に対応するidを与えます。

Code02では、1行目でscroll-btnというclassがついた要素がクリックされるとイベントが生じて中身が実行されるよう記述しています。

あとは順番に、クリックされた要素からスクロール先の要素のidを取得し、その位置をpositionという変数内に格納します。

あとは4~6行目でpositionの位置までjQueryのanimate()で自動スクロールさせます。

補足説明

class名は今回はscroll-btnとしましたが、ここは任意です。変更する場合はCode02の1行目が対応するのでそこも一緒に変更しましょう。

クリックする要素のidには”#”をつけよう

クリックする要素のidには#id名としてください。

#id名としなかった場合はスクロール先の位置が正しく保存されないため動かなくなります。

ページトップボタンにも使えます。

Code02はそのままにしてページトップボタンにscroll-btnというclassと#id名をつけて、ページトップにid名とすればページトップボタンにも使えます。

具体的には下記のようになります。

♦Code03（HTML）

<!DOCTYPE html>
<html lang="ja" dir="ltr">
   <head>
       <meta charset="utf-8">
       <title>jQuery</title>
       <!-- scripts -->
       <!-- jQuery -->
       <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous" defer></script>
       <!-- Style JS -->
       <script src="style.js" defer></script>
   </head>
   <body>
       <div id="top"></div>
       <nav>
           <ul>
               <li id="#nav1" class="scroll-btn">Menu01</li>
               <li id="#nav2" class="scroll-btn">Menu02</li>
               <li id="#nav3" class="scroll-btn">Menu03</li>
               <li id="#nav4" class="scroll-btn">Menu04</li>
               <li id="#nav5" class="scroll-btn">Menu05</li>
           </ul>
       </nav>
       <br><br><br><br><br><br><br><br><br><br>
       <div id="nav1">Menu01</div>
       <br><br><br><br><br><br><br><br><br><br>
       <div id="nav2">Menu02</div>
       <br><br><br><br><br><br><br><br><br><br>
       <div id="nav3">Menu03</div>
       <br><br><br><br><br><br><br><br><br><br>
       <div id="nav4">Menu04</div>
       <br><br><br><br><br><br><br><br><br><br>
       <div id="nav5">Menu05</div>
       <br><br><br><br><br><br><br><br><br><br>
       <br><br><br><br><br><br><br><br><br><br>
       <div id="#top" class="scroll-btn">トップへ</div>
   </body>
</html>

Code01のbody内の一番上と一番下に要素を追加しただけです。

あとはCSSで整形してきれいなサイトに仕上げましょう。

以上です。ありがとうございました。

この記事が気に入ったらサポートをしてみませんか？