このサイトでも使っている一定量スクロールをするとフェードインで表示するボタンの作成方法です。
サイトにちょっとしたアクセントになるかなと思います。
スクリプトとサンプル
$(function($){
var pageTop = $('#page-top');
pageTop.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
pageTop.fadeIn();
} else {
pageTop.fadeOut();
}
});
pageTop.click(function () {
$('body,html').animate({scrollTop: 0}, 500);
return false;
});
});
スクリプトの処理内容
//#pagetopを変数 pageTopに格納
var pageTop = $('#page-top');
// pageTop を非表示
pageTop.hide();
//スクロールをすると{}の中を実行
$(window).scroll(function () {
//$(this).scrollTop() でスクロール位置の値を取得
//位置が300より大きければ
if ($(this).scrollTop() > 300) {
// pageTop をフェードイン表示
pageTop.fadeIn();
//位置が300より大きくなければ
} else {
//pageTop をフェードアウト非表示
pageTop.fadeOut();
}
});
//pageTopをクリックすると{}の中を実行
pageTop.click(function () {
//animate（）で500ミリ秒後にscrollTopを0位置に
$('body,html').animate({scrollTop: 0}, 500);
//a要素を無効化
return false;
});