ページトップへ戻るボタンサンプルです。
下へスクロールするとボタンがあります。
$(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 }); } });