第4回 ページトップへ戻る+スムーズスクロールとボタンの出現方法いろいろ
縦長ページでのページの先頭部分へ戻る仕組みはページ内リンクで設定できますが、ここではページトップへの基本と移動アニメーションの動きについて、またボタンの現れるタイミングについてjQueryやCSS3を使用したパターンをいくつかとりあげてみます。
解説:(有)ムーニーワークス ハヤシユタカ前回は、ページの背景に一枚画像を表示させ、ランダム表示やフェード切り替えなどを行いました。今回は、縦長ページでのページの先頭部分へ戻る仕組みはページ内リンクで設定できますが、ここではページトップへの基本と移動アニメーションの動きについて、またボタンの現れるタイミングについてjQueryやCSS3を使用したパターンをいくつかとりあげてみたいと思います。
■今回作成したサンプル
【サンプル2】:「スクロールするとフェードでボタンが出現のサンプルを見る」
【サンプル3】:「スクロールすると下からアニメーションでボタンが出現のサンプルを見る」
●アンカーリンクとボタン部分のHTML
ページ先頭へ戻るのリンクにはページ内リンクとして、以前はa要素にname属性やid属性を使用していたが、HTML5からはページのアンカーを表すためだけa要素を使うことはできなくなり、name属性も廃止になりましたのでページ内リンク指定にはid属性のみで設定します。
■■■■ HTMLコード
<!-- HTML5では推奨ではないコード --> </head> <body> <a name="top" id="top"></a> <div id="wrapper"> <header id="headerContainer" > <!-- 今回のコード --> </head> <body> <div id="wrapper"> <header id="headerContainer" > <!-- フッター部分のソースコード --> <p class="pagetop inner"> <a href="#wrapper">PAGE TOP</a> </p>
●ボタン部分のCSS
一つ目のサンプルのページ下部常に配置されているボタン
■■■■ CSSコード
/*サンプル1*/ .pagetop { text-align: right; margin: 0 auto; } .pagetop a { display: inline-block; color: #fff; font-size: 1.2em; padding: 6px 2em 4px; border-radius: 4px 4px 0 0; background: #000; }
フッターにそのまま配置した場合 |
一定のスクロール量でアニメーションしながら表示させるためのボタン
■■■■ CSSコード
/*サンプル2*/ .pagetop2 { position: fixed; bottom: 24px; right: 24px; margin: 0 auto; z-index: 200; } .pagetop2 a { display: table-cell; width: 6em; height: 6em; text-align: center; vertical-align: middle; color: #fff; font-size: 1.2em; line-height: 1; border-radius: 50%; background: #000; behavior: url(PIE.htc); } /*サンプル3*/ .pagetop3 { position: fixed; bottom: -300px; right: 24px; margin: 0 auto; z-index: 200; visibility: hidden; -webkit-transition: bottom 0.4s linear; transition: bottom 0.4s linear; } .pagetop3.visible { bottom: 30px; } .pagetop3 a { display: table-cell; width: 6em; height: 6em; text-align: center; vertical-align: middle; color: #fff; font-size: 1.2em; line-height: 1; border-radius: 50%; background: #000; behavior: url(PIE.htc); }
CSS3で丸いボタンを作成 |
●サンプル1:ページスクロールのJS(ボタン据え置きタイプ)
「ページの先頭へ戻る」ボタンが用意できたら、次に、ページの最上部へアニメーションしながら移動する仕組みと、ページがどれくらい下にスクロールされたかを取得し、一定量スクロールされたら「ページの先頭へ戻る」ボタンを表示する仕組みを作成します。
今回3つのタイプのページの先頭へ戻る仕組みを作成しましたが、ページ最上部へ移動する処理はすべて同じ記述になります。1つ目のタイプは、「ページの先頭へ戻る」ボタンがフッタに付属していてCSSのみで設定されているので、Javascript(script_pagetop1.js)には移動処理のみ記述です。
■■■■ JSコード
;(function (d, $) { $(".pagetop a").on('click', function(e){ e.preventDefault(); $('html, body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 1200, 'easeInOutQuart'); }) })(document, jQuery);
●サンプル2:ページスクロールのJS(ボタンフェードインタイプ)
2つ目のタイプは、ページが一定量スクロールすると「ページの先頭へ戻る」ボタンがフェードインし、先頭付近に戻るとフェードアウトするボタンです。Javascript(script_pagetop2.js)には1つ目のタイプと同様に移動処理の他、ページのスクロール量の監視とボタン表示・非表示の処理を行っています。
■■■■ JSコード
;(function (d, $) { var $pagetop = isMobile()?$('.pagetop'): (function(){ return $('.pagetop').removeClass('pagetop').addClass('pagetop2'); })(), pagetop_offset = 400; $pagetop.on('click', function(e){ e.preventDefault(); var _dest = $($(this).find('a').attr('href')).offset().top; $('html, body').animate({ scrollTop: _dest }, 1200, 'easeInOutQuart'); }); if( !isMobile() ) { $pagetop.hide(); $(window).on('scroll', function () { if ($(this).scrollTop() > pagetop_offset) { $pagetop.fadeIn(400); } else { $pagetop.fadeOut(400); } }); } function isMobile(){ return typeof window.orientation != "undefined"; } })(document, jQuery);
●サンプル3:ページスクロールのJS(ボタンスライドインタイプ)
3つ目のタイプは、ページが一定量スクロールすると「ページの先頭へ戻る」ボタンが下からスライドインし、先頭付近に戻るとスライドアウトするボタンになります。
Javascript(script_pagetop3.js)には2つ目のタイプとほぼ同様だが、アニメーションの処理にjQueryではなく、CSS3のtransitionプロパティを使用しています。
classセレクタ「visible」の有無でbottomプロパティの値が変化することで、スライドイン・スライドアウトさせています。
■■■■ JSコード
;(function (d, $) { var $pagetop = isMobile()?$('.pagetop'): (function(){ return $('.pagetop').removeClass('pagetop').addClass('pagetop3'); })(), pagetop_offset = 50; $pagetop.on('click', function(e){ e.preventDefault(); var _dest = $($(this).find('a').attr('href')).offset().top; $('html, body').animate({ scrollTop: _dest }, 1200, 'easeInOutQuart'); }); if( !isMobile() ) { $(window).on('scroll', function () { if ($(this).scrollTop() > pagetop_offset) { $pagetop.css('visibility','visible').addClass('visible'); } else { $pagetop.removeClass('visible'); } }); } function isMobile(){ return typeof window.orientation != "undefined"; } })(document, jQuery);
スクロールによってボタンがアニメーションしながら表示されます |
あとは動きを滑らかにするために「jquery.easing」を使用しています。
■■■■ JSコード
$pagetop.on('click', function(e){ e.preventDefault(); $('html, body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 1200, 'easeInOutQuart'); })
今回は以上になります。
次回もベーシックですが、タブの作成を行います。タブによる情報の切り替えもjQueryではベーシックなものですが、いくつかバリエーションを作ったものを紹介していきます。
『現場でかならず使われている jQueryデザインのメソッド』
今回紹介したサンプルは『現場でかならず使われている jQueryデザインのメソッド』にてサンプルダウンロードとコードの解説を行っております。 |
作成したサンプルや本の紹介はこちらをご覧ください。
2014/10/8
●本連載で使用している書籍「現場でかならず使われている jQueryデザインのメソッド」
Profile
【ハヤシユタカ】2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より教鞭をとる。2004年からは、デジタルハリウッド大学大学院、明治大学大学院非常勤講師を歴任。2012年からはデジハリオンラインスクールにてWEB関連講座のeラーニング教材の開発に携わり、会社・自宅のPCからいつでも「HTML5」「WordPress」を学べる講座を担当。2013年御苗場Vol12.横浜にて「The Zoological Garden ~言葉のない対話~」エプソン賞受賞。
こちらの連載もあわせてご覧ください
●WordPressでブログでなくビジネスサイトをつくろう:http://www.mdn.co.jp/di/articles/2782/
●ゼロからはじめるHTML5でのサイト制作:http://www.mdn.co.jp/di/articles/2605/
●HTML5でサイトをつくろう:http://www.html5-memo.com/
●Webデザインクリップ:http://webdesignmatome.com/
【著書・共著】
●現場でかならず使われている jQueryデザインのメソッド (2014/4/25)
●HTML5デザイン 仕事のネタ帳 CSS3+JavaScript+CSSフレームワークと活用するプロのテクニック (2014/3/24)
●現場で役立つCSS3デザインパーツライブラリ (2013/5/17)
●WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作 (2012/9/20)
●WebデザイナーのためのHTML5入門 (2012/08)
●ポケット詳解 jQuery Mobile辞典 (2012/05)
●すべての人に知っておいてほしい HTML5 & CSS3 の基本原則(2012/10/20)
●すべての人に知っておいてほしい スタイルシートデザインの基本原則(2012/5/25)