こんにちは。デザイナーの（鈴）です。
今回は「ページトップ」ボタンのちょっとしたスクリプトを紹介します。
一定量スクロールすると「ページトップ」ボタンが表示されるサイトがあります。
フェードやスライド表示することで、動きのあるサイトにしたい時や、
メインビジュアルが大きく、ファーストビューで「ページトップ」ボタンを
表示したくない場合にはとても便利なスクリプトです。
それでは実装方法を紹介していきます。
html
下記は「ページトップ」ボタンが画像の場合の記述になります。
CSSのみでの表示も可能です。
<p class="pagetop"><a href="#container"><img src="img/pagetop.png" alt="PAGE TOP" /></a></p>
CSS
.pagetop {
position: fixed;
bottom: 20px;
right: 20px;
}「fixed」にして固定配置にしています。
デザインに合わせて値を変更してください。
javascript
まずjQuery本体ファイルを読み込みます。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
今回の記述は下記のようになります。
//pagetop
$(function() {
var topBtn = $('.pagetop');
topBtn.hide();
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
//ボタンの表示方法
topBtn.fadeIn();
} else {
//ボタンの非表示方法
topBtn.fadeOut();
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body, html').animate({
scrollTop: 0
}, 500);
return false;
});
});9行目の「topBtn.fadeIn();」部分で表示方法、
12行目の「topBtn.fadeOut();」部分で非表示方法を指定しています。
今回はフェードですが、スライドなどのアニメーションも可能です。
18行目の「scrollTop() > 100」部分でスクロールした量を指定しています。
スクロール量を調整したい場合は「100」を変更してください。
19行目の「}, 500);」部分でスクロールする時の速度を指定しています。
「500」の部分を好きな値に変更してください。
実装してみて
上記だけ実装できるので、とても簡単です。
「ページトップ」ボタンの配置やデザインはカスタマイズ可能です。
今回の表示方法はフェードですが、スライドなどのアニメーション表示もできます。
サイトに合わせて、デザインや表示方法を変えて実装してみてください。
特にシンプルなデザインのサイトには動きが生まれ、
いいアクセントになる有効なスクリプトです。
また今回のスクリプトは汎用性が高く、
スクロールするとヘッダーを固定表示するカスタマイズも可能です。
ぜひ試してみてください。
参考リンク
下記サイトは参考にしたサイトになります。
表示方法の別パターンの説明もあるので、詳しく知りたい方はどうぞ。
http://www.webopixel.net/javascript/538.html
http://www.nxworld.net/tips/page-top-appears-scroll.html
