徹底解説！スムーススクロールをjQueryで実装する方法
ページ内リンクをクリックしたとき、
ガタッと目的地に遷移すると、なんだか見づらいですよね。
今回はページ内リンクをクリックしたときに、
スムーズに目的の箇所までスクロールする、スムーススクロールについてご紹介します！
各コードの詳しい解説をしていきますので、
今すぐコピペで使えるコードが欲しい方はこちらへどうぞ！
1、HTMLを記述する
まずは、スクロールの出発地点と到着地点をHTMLで記述します。
【HTML】
出発地点にaタグで到着地点のID名を記述、
到着地点のaタグにIDを記述します。
※ページ内でスクロールしているのがわかりやすいように、
spaceというクラスにmarginをつけています。
2、jQueryを記述する
jQueryってどうやって使うの？という方は、
以下のリンクからjQueryの基本的な書き方の紹介をご覧ください。
2-1、到着地点を取得する
まずは、jqueryのクリックアクションを記述します。
【jQuery】
|
1 2 3 4 5 |
$(function(){ // #で始まる出発地点をクリックした場合に処理を実行 $('a[href^=#]').click(function() { }); }); |
$(‘a[href^=#]’)
この部分は、
「aタグの属性がhrefで値が#で始まる要素だったとき」
という指定の記述になります。
2-2、出発地点の値を取得する
【jQuery】
|
1 2 3 4 5 6 7 |
$(function(){ // #で始まる出発地点をクリックした場合に処理を実行 $('a[href^=#]').click(function() { // 出発地点の値を取得 var href= $(this).attr("href"); }); }); |
変数href(var href)に出発地点の値を代入します。
.attrは、パラメータの値を取得するメソッドです。
出発地点であるhrefの値を取得したいので、
パラメータにhrefを指定しています。
今回の場合はこの記述で、
出発地点に設定した#pointという値が取得されています。
2-3、到着地点の値を取得する
【jQuery】
|
1 2 3 4 5 6 7 8 9 |
$(function(){ // #で始まる出発地点をクリックした場合に処理を実行 $('a[href^=#]').click(function() { // 出発地点の値を取得 var href= $(this).attr("href"); // 到着地点を取得 var target = $(href == "#" || href == "" ? 'html' : href); }); }); |
この部分は、到着地点を変数targetに代入する記述です。
$(href == “#” || href == “” ? ‘html’ : href);
この部分を一つずつ解説していくと…
【 href == “#” 】 変数hrefの値が”#”
【 || 】 もしくは
【href == “”】 “”
【 ? 】 であれば
【 $(‘html’); 】 へのリンク（≒ページトップ）
そうでなければ
【 $(href); 】 変数hrefの中身が到着地点になる
という記述です。
2-4、到着地点の値を取得する
【jQuery】
|
1 2 3 4 5 6 7 8 9 10 11 |
$(function(){ // #で始まる出発地点をクリックした場合に処理を実行 $('a[href^=#]').click(function() { // 出発地点の値を取得 var href= $(this).attr("href"); // 到着地点を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 到着地点を数値で取得 var position = target.offset().top; }); }); |
到着地点がどこだかわかった後は、
その地点を数値で取得します。
offset()は表示位置を取得するメソッドです。
positionという変数にoffsetメソッドでtargetのtop位置を代入します。
2-5、スクロールの記述をする
あとは出発地点から到着地点まで
スムーススクロールする記述をすれば完了です！
【jQuery】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function(){ // #で始まる出発地点をクリックした場合に処理を実行 $('a[href^=#]').click(function() { // 出発地点の値を取得 var href= $(this).attr("href"); // 到着地点を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 到着地点を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, 400, 'swing'); }); }); |
animateメソッドは、
指定したプロパティを目的地まで動かすメソッドです。
{scrollTop:position}で、positionまでスクロールするという指定をしています。
400という数字の部分は、スクロールのスピードを指定する記述です。
数字が小さくなるほど速くスクロールします。
swingというのは、animateのイージングのひとつです。
animateのイージングは基本的に「linear」と「swing」の２種類です。
それぞれの違いは以下の通りです。
linear：常に同じ速さで動く
swing：始めはゆっくり動いて、途中はちょっと速め、最後はゆっくりと動く
2-6、クリック後の処理
2-5までの記述でもスクロール自体は動くのですが、
出発地点をクリックすると、URLにIDタグが付与されてしまいます。
これを防ぐために、最後に１文を追加します。
【jQuery】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(function(){ // #で始まる出発地点をクリックした場合に処理を実行 $('a[href^=#]').click(function() { // 出発地点の値を取得 var href= $(this).attr("href"); // 到着地点を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 到着地点を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, 400, 'swing'); return false; }); }); |
3、完成
これでスムーススクロールのjQueryの記述が完了しました。
HTMLに反映した結果は以下でご確認いただくことができます。
【HTML】
【jQuery】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(function(){ // #で始まる出発地点をクリックした場合に処理を実行 $('a[href^=#]').click(function() { // 出発地点の値を取得 var href= $(this).attr("href"); // 到着地点を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 到着地点を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, 400, 'swing'); return false; }); }); |
【結果】
出発地点の文字をクリックすると、到着地点の文字のトップ部分に遷移します。
4、まとめ
何気なくコピペで使っているjQueryも、
しっかりと自分で理解して記述していくと自分の力にもなりますし、
別の作業中に、ここはjQueryで処理できるのではないか？というアイディアも湧いてきます。
最初は難しいかもしれませんが、ひとつひとつ覚えて、
確実に自分の力にしていきたいですね！
執筆者
DTPデザイナー、雑貨屋さんのスタッフ、一般事務… 散々やりたいことをやり散らかして、WEBデザイナーに落ち着きました。ものを作っている時間が好き。
うさぎと音楽が好きすぎて、うさぎと音楽を無理やりこじつけたお洋服を作ったり、イベント企画をしたりもしています。
この記事を読んだ人はこんな記事も読んでいます
CHANGEUP!では、エンジニアの転職、
フリーランスの案件紹介を行なっています。
将来の働き方で迷っている方、転職をお考えの方、あなたのエンジニアとしての力を最大限発揮できる場所を提案させていただきます。
サービス紹介
よくある質問
