よく見るスクロールすると途中から出てくる「トップに戻る」ボタンを設置しようとしています。
幅100%(画面幅いっぱい)で作ってスクロール中は一番下に表示(margin-bottom:0な感じ)、最下部に到達したら最下部にあるcopyrightを見せるため少し上(margin-bottom:20pxな感じ)で止めたいです。
以下を見つけたのですが、どこか修正する事で「最下部に着いたら下に余白を置く」と言うのを出来るでしょうか?
$(function() {
var showFlag = false;
var topBtn = $('#page-top');
topBtn.css('bottom', '-100px');
var showFlag = false;
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 200) {
if (showFlag == false) {
showFlag = true;
topBtn.stop().animate({'bottom' : '0px'}, 200);
}
} else {
if (showFlag) {
showFlag = false;
topBtn.stop().animate({'bottom' : '-100px'}, 200);
}
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
コメント(0件)