初心者にも簡単！jQueryで、スムーズにページ内移動をさせる
jQueryの基本的な理解を深めるには、下記の記事をご覧ください！
jQuery初心者にとって、最初に理解しやすい動きの一つが、今回紹介する、「スムーズスクロール」だと思います。
スムーズスクロール デモ画面
デモ画面
スムーズスクロールのデモ画面はこちらです。
デモ画面のサンプルソース
ちょっと長いですが、上記デモ画面のソース全文は以下になります。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<title>スムーススクロール jQueryデモ画面 | 知るウェブ</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script>
$(function(){
$("a[href^='#']").click(function() {
// #で始まるアンカーをクリックした場合に処理
var speed = 500; // ミリ秒
// スクロールスピード
var href= $(this).attr("href");
// アンカーの値を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先取得
var position = target.offset().top;
// 移動先を数値で取得
$('body,html').animate({scrollTop:position}, speed, 'swing');
// スムーススクロール実行
return false;
});
});
</script>
<style>
div {
width:auto;
height:400px;
}
ul {
margin-bottom: 300px;
}
a.button{
font-size:16px;
padding:20px;
background-color: blue;
color:#ffffff;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<h2 id="index">移動したい場所を選ぶよ</h2>
<ul>
<li><a href="#demo1">1に移動</a></li>
<li><a href="#demo2">2に移動</a></li>
<li><a href="#demo3">3に移動</a></li>
<li><a href="#demo4">4に移動</a></li>
</ul>
<div id="demo1">
<h2>1に移動したよ</h2>
<a class="button" href="#index">▲ 選択リストに戻る ▲</a>
</div>
<div id="demo2">
<h2>2に移動したよ</h2>
<a class="button" href="#index">▲ 選択リストに戻る ▲</a>
</div>
<div id="demo3">
<h2>3に移動したよ</h2>
<a class="button" href="#index">▲ 選択リストに戻る ▲</a>
</div>
<div id="demo4">
<h2>4に移動したよ</h2>
<a class="button" href="#index">▲ 選択リストに戻る ▲</a>
</div>
</body>
</html>
デモ画面のソース解説
HTML部分
「body」以下を解説します。
<h2 id="index">移動したい場所を選ぶよ</h2> <ul> <li><a href="#demo1">1に移動</a></li> <li><a href="#demo2">2に移動</a></li> <li><a href="#demo3">3に移動</a></li> <li><a href="#demo4">4に移動</a></li> </ul>
ここは移動元となる部分です。
ページ内リンクなので、「a」タグを使い、「href」で、移動先のid名をしています。
<div id="demo1"> <h2>1に移動したよ</h2> <a class="button" href="#index">▲ 選択リストに戻る ▲</a> </div>
これが移動先です。
１行目に記述した、「id=”demo1″」が、この移動先となるid名ですね。
３行目には、移動元に戻る指令を記載しています。
移動元には、「h2」タグで「id=”index”」と設定していました。クリックしたらそこに戻るという感じです。
さて、もしjQueryを全く使わず、htmlだけでページ内リンクの設定をしているとどうなるか。
下記の「デモページ２」をご覧ください。
jQueryを使った場合とは違って、一瞬で移動先に飛んでしまいます。
こうなると、ページの中で、どこからどの辺に飛んでいったかわからないですよね。
スムーズスクロールにすることで、ページ全体の中で、どの辺に移動したかを感覚的にユーザーに知らせることができます。
ユーザーは、ページの構成を理解しやすくなり、そのページが他にどんなコンテンツを持っていて、今移動した先がその中でどの位置に存在しているのかがわかります。
ユーザーに優しいインターフェースになるわけですね！
jQuery部分
<script>
$(function(){
$("a[href^='#']").click(function() {
// #で始まるアンカーをクリックした場合に処理
var speed = 500; // ミリ秒
// スクロールスピード
var href= $(this).attr("href");
// アンカーの値を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先取得
var position = target.offset().top;
// 移動先を数値で取得
$('body,html').animate({scrollTop:position}, speed, 'swing');
// スムーススクロール実行
return false;
});
});
</script>
まずは３行目。
$("a[href^='#']").click(function() {
これは、「click」イベントの発動です。
aタグのセレクタとして「[href^=’#’]」をしてしています。
これは 「href のうち ‘#’から始まる文字列を持っているもの」 ということを指定しています。
デモページでは、全てのhrefに ‘#＋（id名）’ を記載しているので、すべてのaタグが対象になっています。
その後に続く、「.click(function() { 」 で aタグがクリックされたら・・・を定義しています。
つづいて6行目。
var speed = 500; // ミリ秒
これは、スクロールする際のスピードを定義しています。
「ミリ秒」で指定しますので、「500」は0.5秒です。1秒にしたければ、「1000」です。
これは数字を変えながら、どれがイメージに合うかを色々検証してみると良いですね。
つづいて9行目。
var href= $(this).attr("href");
まず、「$(this)」ですが、これは、３行目に記載したクリックイベントを発動させた「a」タグそのものを指名しています。
続く「.attr(“href”)」で、その指名しているaタグの「href」の値を取得し、変数「href」に入れています。
デモページで具体的に考えると、
<li><a href="#demo1">1に移動</a></li>
こいつをクリックした場合、”#demo1″が 「var href」に入ることになります。
次、12行目。
var target = $(href == "#" || href == "" ? 'html' : href);
これは、今回のデモページではあまり意味が無いっちゃ無いのですが、「var href」に入っている内容に応じて、飛び先として指定する「var target」の内容を変えているんですね。
「もし、クリックした「a」タグの「href」が”#”または””（空白）だったら、「html」をtargetに入れなさい、そうでなければ、href変数に入っているものをtargetにそのまま入れてね」っていう内容です。
「html」をtargetにしてあげることで、ページの最上部に移動させることができます。移動先が不明な場合はページの最上部に戻してあげるってことですね。
つづいて、15行目。
var position = target.offset().top;
これは、移動先の位置を数字に変換しています。
「offset()」は、ページの一番左上から、対象となる要素までの距離を算出してくれます。
さらにその後ろの「.top」で、上からの位置を指定しています。
「top」の他に、「left」で左からの距離を取得することもできます。
「var position」 に、ページ最上部から飛び先までの上下の距離を入れているわけです。
最後に、18行目。
$('body,html').animate({scrollTop:position}, speed, 'swing');
「animate」は、その名の通り、「アニメーション」してくれるjQueryメソッドです。
今回は、「移動」をアニメーションしていますが、色の透過率を変更したり、サイズを変えたりする際にも使える、動きを表現するにあたっては非常に汎用性の高い、jQueryのメソッドです。
基本的な構文は、
$(‘動したい要素名’).animate({
‘アニメーション名’: ‘動かす距離’
});
です。
今回の例では、
‘アニメーション名’に、scrollTopを指定してます。これは、ページのY座標（上下の位置）をスクロールしてね、というアニメーションです。
‘動かす距離’は、15行目に指定しているものです。クリックしたaタグの飛び先ごとに距離が変わりますので、変数「position」に飛び先ごとの距離を入れていたんですね。
さて、animationでは、任意で、第二引数、第三引数を指定できます。
上記の例では、第二引数には変数’speed’を入れています。
つまり、第二引数はアニメーションの長さ（スピード）を指定できます。
変数speedには、「500」が入ってますので、「0.5秒」でアニメーションを完了してね、という指示を出しています。
第三引数は、加速の演出を指定できます。
animationメソッドでは、２つ用意されています。
- swing：徐々に加速したのちに、減速し停止します。第三引数に何もしていなければ、こちらが指定されます。
- linear：等速で移動します。
加速演出については、「jQuery Easing Plugin」というプラグインを使うことで、いろいろな演出を指定できるようになります。
それぞれ指定できる演出は、下記のサイトに詳しく記載されていますので、ぜひ参考にしてみてください。
【jQuery】アニメーション動作に変化をつける『easing.js』の使い方
以上が、サンプルデモのソース解説です。
WordPressの場合の注意点
WordPressでjQueryを使う場合、「$(‘body,html’)」のように、jQueryの構文で使われる「”$”」が、Wordpressで別の場面で使われるものとプログラムが混同してしまい、うまく動かなくなる恐れがあります。
そのため、WordpressでjQueryを使う場合は、”$”ではなく、”jQuery”と記述するようにします。
つまり、「jQuery(‘body,html’)」と書きます。
まとめ
ページ内リンク移動のスムーズスクロールをjQueryを使って実装する方法を細かく見ていきました。
「ページTOPへ」みたいなボタンで使っているサイトも多々あると思います。
いずれのシーンにおいても、ユーザーにとって感覚的にそのページの構造が理解できるので、ユーザーフレンドリーなサイトを演出させることができます。
また、animateメソッドは、他にも色々な場面で活躍するので、JSやjQuery初心者の方はぜひ押さえておきましょう！
