ページトップボタンのjQuery

「ページトップへ」のボタンが出現して、そのままスクロールに合わせてついてくるやつ

jQueryで作るスクロールしたら出現してスクロールに追随し、フッターの位置で止まるスムーススクロール
http://memocarilog.info/jquery/5217

HTML

<p class="gotop">
    <a href="#">
    <img src="images/gotop.png" alt="ページトップへ戻る">
    </a>
</p>

CSS

#container{
    position: relative;
}
p.gotop{
    position: fixed;
    right: 5%;
        bottom: 0;
}
p.gotop a{
    width: 125px;
    height: 94px;
    display: block;
}

ヘッダー内に以下のjQueryを追加
JavaScript

<script>
$(document).ready(function(){
 
    $(".gotop").hide();
     // ↑ページトップボタンを非表示にする
 
    $(window).on("scroll", function() {
 
        if ($(this).scrollTop() > 100) {
            // ↑ スクロール位置が100よりも小さい場合に以下の処理をする
            $('.gotop').slideDown("fast");
            // ↑ (100より小さい時は)ページトップボタンをスライドダウン
        } else {
            $('.gotop').slideUp("fast");
            // ↑ それ以外の場合の場合はスライドアップする。
        }
         
    // フッター固定する
 
        scrollHeight = $(document).height(); 
        // ドキュメントの高さ
        scrollPosition = $(window).height() + $(window).scrollTop(); 
        // ウィンドウの高さ+スクロールした高さ→ 現在のトップからの位置
        footHeight = $("footer").innerHeight();
        // フッターの高さ
                 
        if ( scrollHeight - scrollPosition  <= footHeight ) {
        // 現在の下から位置が、フッターの高さの位置にはいったら
        //  ".gotop"のpositionをabsoluteに変更し、フッターの高さの位置にする        
            $(".gotop").css({
                "position":"absolute",
                "bottom": footHeight
            });
        } else {
        // それ以外の場合は元のcssスタイルを指定
            $(".gotop").css({
                "position":"fixed",
                "bottom": "0px"
            });
        }
    });
 
    // トップへスムーススクロール
    $('.gotop a').click(function () {
        $('body,html').animate({
        scrollTop: 0
        }, 500);
        // ページのトップへ 500 のスピードでスクロールする
        return false;
     });
 
});
</script>


コメントは受け付けていません。