ページ内リンク
-ページ内の指定の場所にスクロール-
See the Pen 8-2-1 ページ内の指定の場所にスクロール by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
「Result」内のリンクをクリックして動きを確かめてね!
動きを実現する仕組み
jQuery を使い、ページ内リンクのHTML タグhref から、リンクされているエリアid の値を取得し、id の上部の距離を取得する。
リンクがクリックされたら取得された位置までスクロールする。
[使用するライブラリ]
* jQuery
HTMLの書き方
- body内にリンク元のHTMLとリンク先のHTMLを記載します。
<ul id="page-link"> <li><a href="#area-1">Area 1</a></li> <li><a href="#area-2">Area 2</a></li> </ul> <section id="area-1"> <h2>タイトル</h2> <p>内容</p> </section> <section id="area-2"> <h2>タイトル</h2> <p>内容</p> </section>
- body 終了タグ直前に jQuery、動きを制御する自作のJS の2 つを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <!--自作のJS--> <script src="js/8-2-1.js"></script> </body>
自作のJS内の書き方
$('#page-link a[href*="#"]').click(function () {//全てのページ内リンクに適用させたい場合はa[href*="#"]のみでもOK
var elmHash = $(this).attr('href'); //ページ内リンクのHTMLタグhrefから、リンクされているエリアidの値を取得
var pos = $(elmHash).offset().top; //idの上部の距離を取得
$('body,html').animate({scrollTop: pos}, 500); //取得した位置にスクロール。500の数値が大きくなるほどゆっくりスクロール
return false;
});
バリエーション
を見る
「機能」に関わる
動き一覧
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!