ページ内リンク
-追従するヘッダー分の高さを引いて適切な場所へスクロール-
See the Pen 8-2-2 追従するヘッダー分の高さを引いて適切な場所へスクロール by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
「Result」内のリンクをクリックして動きを確かめてね!
動きを実現する仕組み
jQuery を使い、ページ内リンクのHTML タグhref から、リンクされているエリアid の値を取得し、id の上部の距離からHeader の高さを引いた値を取得する。
リンクがクリックされたら取得された位置までスクロールする。
[使用するライブラリ]
* jQuery
HTMLの書き方
- head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/8-2-2.css"> </head>
- body内にHeaderと、リンク元、リンク先のHTMLを記載します。
<header id="header"> <h1>Logo</h1> </header> <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-2.js"></script> </body>
自作のCSS内の書き方
/*== ヘッダー追従のためのCSS */
#header{
position: fixed;/*追従ナビのためpositionをfixedにする*/
top:0;/*ポジション設定topを0*/
height: 70px;/*headerの高さを指定*/
width:100%;/*position:fixed;にしたため、横幅100%を設定*/
background:#333;
color:#fff;
text-align: center;
padding: 20px;
}
/*検証のためのCSS*/
section{
padding: 500px 0;
}
#page-link{
padding-top: 100px;
}
自作のJS内の書き方
$('#page-link a[href*="#"]').click(function () {//全てのページ内リンクに適用させたい場合はa[href*="#"]のみでもOK
var elmHash = $(this).attr('href'); //ページ内リンクのHTMLタグhrefから、リンクされているエリアidの値を取得
var pos = $(elmHash).offset().top-70;//idの上部の距離からHeaderの高さを引いた値を取得
$('body,html').animate({scrollTop: pos}, 500); //取得した位置にスクロール。500の数値が大きくなるほどゆっくりスクロール
return false;
});
この技術を使ったサンプルサイト
バリエーション
を見る
「機能」に関わる
動き一覧
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!