WEB系キャンパス

Footer上でPageTopアイコンを止めるjQueryの書き方

スクロールしたら右端に出てくるページ上までビューンと連れてってくれるボタン(PageTopボタンと呼びます)をフッターの上でピタッと止める方法。

$(function(){
    $(".page-top").hide();
    $(window).on("scroll", function() {
        if ($(this).scrollTop() > 100) {
            $(".page-top").fadeIn("fast");
        } else {
            $(".page-top").fadeOut("fast");
        }
        scrollHeight = $(document).height();
        scrollPosition = $(window).height() + $(window).scrollTop();
        footHeight = $("footer").innerHeight();
        if ( scrollHeight - scrollPosition  <= footHeight ) {
            $(".page-top").css({
                "position":"absolute",
                "bottom": footHeight + 1
            });
        } else {
            $(".page-top").css({
                "position":"fixed",
                "bottom": "0"
            });
        }
    });
    $('.page-top').click(function () {
        $('body,html').animate({
        scrollTop: 0
        }, 400);
        return false;
    });
});

DEMO

肝の部分はPageTopアイコンの基準点を設けるためにfooterに「position:relative」

footer {
  position: relative;
}

そして、<footer>の中にPageTopアイコンを入れる。

<footer>
  フッター
  <p class="page-top"><a href="#">▲</a></p>
</footer>

あとは適正調整って感じ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です