閲覧ページの先頭まで移動できるように設置しているところも多い「ページトップ」や「ページの先頭へ」といったページ内リンクで、移動する際の動きにjQueryを使ってエフェクトをつけたサンプルです。よく見かける単純なスムーススクロールを含めた全5種類で、少しいじればその他の場所へのページ内リンクの動きとしても実装できます。
※以下で紹介している方法はいずれもjQueryを使用していますので、予め読み込ませてください。
また、サンプルによってはjQuery Easingも使用しています。
※jQueryの記述はいずれもセレクタにaを指定しているため、特定の要素にのみ適用させたい場合などはIDやクラスを用いるなどして指定してください。
使用するHTML・デモ
サンプルで使用しているHTMLは以下のようなa要素でhrefには#を記述したシンプルなものになっています。
HTML
<a href="#">PAGE TOP</a>また、それぞれの実際の動きは以下で確認できます。
ページ下部にそれぞれ紹介している動きのボタンが配置されているので、ボタンをクリックして動きを確認してみてください。
※デモはCodePenを使用しているのですが、スマートフォンでは動きを確認できない場合があるのでPCで確認してください。
jQuery：ページトップへの動きに使えるエフェクト 5 目次
1. スムーススクロール
一番よく見かけることがあると思う単純なスムーススクロールで、jQueryを以下のように記述します。
スクロール時のスピードを変えたい時は、ソース内の赤文字で「800」と記述している部分を任意の数値へ変更してください。
jQuery
$(function(){
$('a').on('click', function(e){
e.preventDefault();
$('html, body').stop().animate({
scrollTop: 0
},800);
});
});2. スムーススクロール＋jQuery Easing
先ほどのスムーススクロールの動きにイージングを組み合わせたもので、jQuery Easingも読み込んでいる状態で以下のように記述します。
今回のサンプルではゆっくり動き出して徐々にスピードアップしていくような動きになる「easeInQuint」を指定しています。
jQuery
$(function(){
$('a').on('click', function(e){
e.preventDefault();
$('html, body').stop().animate({
scrollTop: 0
}, 800, 'easeInQuint');
});
});スクロール時のスピードを変えたい時は、同じくソース内の赤文字で「800」と記述している部分を任意の数値へ変更し、イージングの動きはソース内の赤文字で「easeInQuint」と記述している部分を任意のものに変更してください。
その他の動きにしたいという時は、以下で様々な動きを確認することができます。
3. いきなりページの先頭近くに
文章だと伝わりづらいと思うので実際の動きを見てもらいたいのですが、ページ内リンクをクリックするとほぼページの先頭部分へアニメーションなしで移動し、その後少しだけイージングを用いたスムーススクロールの動きがついてページの先頭にいくというものです。
実装にはjQuery Easingも読み込んでいる状態で以下のように記述します。
jQuery
$(function(){
$('a').on('click', function(e){
e.preventDefault();
$('html, body').scrollTop(800).stop().animate({
scrollTop: 0
}, 800, 'easeOutExpo');
});
});.scrollTop()の部分で記述している赤文字の数値はアニメーションなしで移動する場所の指定、その下の赤文字はそれぞれスムーススクロール時のスピードやイージングを指定する部分となります。
4. 点滅してページの先頭に
こちらはこれまでのものとは違ってスムーススクロールは使用せずにページの先頭へ移動するもので、その際にopacityを使うことによってページが一瞬点滅していくエフェクトを加えたものです。
実装にはjQueryを以下のように記述します。
jQuery
$(function(){
$('a').on('click', function(e){
e.preventDefault();
$('html, body').css('opacity', '0').scrollTop(0).animate({
opacity: 1
}, 800);
});
});まずページ内リンクをクリックした際にopacity: 0でコンテンツが見えなくなっている間にページの先頭へ移動させます。
あとは、再びopacityを使ってコンテンツを表示させることで、一瞬点滅するとページの先頭に戻っているという動きを実装できます。
この方法は以下で紹介されているものを参考にしました。
人によっては「何が起きたかわからない（わかりにくい）」といった意見もあるとは思いますが、個人的には面白い見せ方で覚えておきたいなと思いました。
5. スクロール＋フェードアウト/フェードイン
こちらはスムーススクロールの動きにopacityを組み合わせたもので、まずページ内リンクをクリックすると上にスクロールしながらコンテンツが消えていき、ページの先頭近くになるとまたコンテンツが表示されていくという動きになります。
実装にはjQueryを以下のように記述します。
jQuery
$(function(){
$('a').on('click', function(e){
e.preventDefault();
$('html, body').animate({
scrollTop: 600,
opacity: 0
}, 400, function() {
$('html, body').animate({
opacity: 1,
scrollTop: 0
}, 400);
});
});
});