ページ内の指定の場所にスクロール

ページ内リンク
-ページ内の指定の場所にスクロール-

デモページを見る

See the Pen 8-2-1 ページ内の指定の場所にスクロール by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」内のリンクをクリックして動きを確かめてね!

動きを実現する仕組み

jQuery を使い、ページ内リンクのHTML タグhref から、リンクされているエリアid の値を取得し、id の上部の距離を取得する。

リンクがクリックされたら取得された位置までスクロールする。

[使用するライブラリ]
* jQuery

HTMLの書き方

  1. 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>
  2. 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;
});

バリエーション
を見る

「機能」に関わる
動き一覧

書籍情報

紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。

もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!

書籍紙面サンプル

出版社:ソシム株式会社
2021/2/27 発売

書籍紙面サンプル

出版社:ソシム株式会社
2021/7/31 発売

Page
Top