ページトップへ戻るボタンサンプルです。
下へスクロールするとボタンがあります。
$(function () {
$("#btn_top").click(function () {
$('html,body').animate({scrollTop: 0}, 'slow', 'swing');
return false;
});
});
スクロールすると出現し、フッターの高さで付随をキャンセルするやり方は以下の通り。
$("#pagetop").hide();
// ↑pagetopを非表示にする
$(window).bind("scroll", function () {
// トップから120px以上スクロールしたら
if ($(this).scrollTop() > 100) {
// ページトップのリンクをフェードインする
$("#pagetop").fadeIn();
} else { // それ以外は
// ページトップのリンクをフェードアウトする
$("#pagetop").fadeOut();
}
// フッター固定する
scrollHeight = $(document).height();
// ドキュメントの高さ
scrollPosition = $(window).height() + $(window).scrollTop();
// ウィンドウの高さ+スクロールした高さ→ 現在のトップからの位置
footHeight = $("#footer").innerHeight();
// フッターの高さ
if (scrollHeight - scrollPosition <= footHeight - 15) {
// 現在の下から位置が、フッターの高さの位置にはいったら
// ".gotop"のpositionをabsoluteに変更し、フッターの高さの位置にする
$("#pagetop").css({
"position": "absolute",
"right": 0,
"bottom": footHeight
});
} else {
// それ以外の場合は元のcssスタイルを指定
$("#pagetop").css({
"position": "fixed",
"right": 0,
"bottom": 15
});
}
});
