<a href="../#test">移動</a>等のリンクを使用し、WEBページ内を移動する場合、通常のパッと切り替わるページ遷移方法だと、同ページ内で移動したのか、他のページに移動したのかが分かりにくい現状があります。
ページ内の移動の時は、自動で上下にスクロールして目的の位置まで動かす事で、ページ内の移動を自然と演出する事が出来ます。
今回は、jQueryが初めての方でも簡単に理解して頂けるようにかなり初歩的な部分から書き始めます。
クライアント側だけの表示の処理なので、Javascriptで作成するのが一般的でしょう。Javascriptが少し難しく感じたら、jQueryを採用して下さい。
関連の知識がある人の言葉で書くと、「該当ページのロード処理でページ内リンクにクリック処理をバインドする。」となります。
一般的な日本語で書くと、「まず、該当のページがロードされたら、各ページ内リンクを探し、クリックされた際の処理を設定する。」という事です。
難しい作業は一切なく、上記の3ステップを順にスクリプトにしていきます。
言葉で書くと非常に難しく思いますが、jQueryを使う時にはほぼ100%使用している形ですので、安心して下さい。
対象のページの<body></body>内の最後に下記コードを書き込みます。
<body>
<!-- コンテンツ -->
// ここに文字や画像などのコンテンツが入ります。
<!-- JavaScript -->
<script type="text/javascript" charset="UTF-8" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" charset="UTF-8">
$(document).ready(function() {
// ここに何か処理をきます。
});
</script>
</body>
これは、document(対象のページ)がready(読み込まれで準備が完了)したら、function(目的の処理)を実行するというスクリプトです。
これで、jQueryを使う準備が整いました。
先にも書いた通り目的のページ内リンクは、<a href="../#test">XXX</a>という要素を対象にします。
jQueryで要素を探す際は、要素タグ名、クラス名、ID名等を使って以下のように書きます。
$('#ID名') //
$('.クラス名') //
$('body a') //
$('body a')
ただ、上記だけだと、他のページへのリンク、他の外部サイトへのリンク等全てのaタグが抽出されてしまいます。
今回は、href="../#XXX"という、ページ内のリンクだけを対象とする為、「aタグリンクの中で、リンクが#で始まるもの」を抽出してみます。
$('body a[href^=#]')
onメソッドを使って。$(要素).on(イベント, 処理);と書きます。今回は「クリック処理」などので、$(要素).on('click', 処理);となります。
処理には、{}で囲まれた「無名関数」function() {}を使います。{}内に複数の処理を書く事ができます。
$(document).ready(function() {
$('body a[href^=#]').on('click', function() {
// リンクがクリックされた時の処理
});
});
ページの上下スクロールには「scrollTop」の値を操作します。
まず、リンク先の位置を取得し、scrollTop に設定します。
その時、少し(ほんの数秒)時間を掛けてスクロールする事で、スムーズに移動しているような効果が出ます。
$('body a[href^=#]').on('click', function() {
// 単純に$("html, body").css('scrollTop', 設定値);としても良いが、
// css()メソッドだと、時間を設定できないので、animate()を使用する。
// すぐに移動しないように、デフォルトの動きを停止させます。
event.preventDefault();
// リンクの位置(ページ上部からの距離(ピクセル))
var HashOffset = $(this.hash).offset().top;
// 1秒(1000ミリ秒)掛けて、scrollTopをリンク位置まで移動させる
$("html, body").animate({
scrollTop: HashOffset
}, 1000);
});
この「animate」メソッドは、続けてリンクがクリックされた場合、最初のアニメーション処理(1秒)が完全に終了してから、次の処理が動き出す性質があります。
もし、前のアニメーションを中断して、次のアニメーションに移らせたい場合、「animate」メソッドの前に「stop」メソッドを使い、それまでのアニメーションを全てキャンセルしてから、新たなアニメーションを実行します。
$('body a[href^=#]').on('click', function() {
event.preventDefault();
var HashOffset = $(this.hash).offset().top;
$("html, body").stop().animate({
scrollTop: HashOffset
}, 1000);
});