ページの上部へ戻るボタン（画像）をフェードイン・アウトで表示させる（jQuery）

• jQuery

2012.08.24更新

ページの上部へ戻るボタンです。すでにWEBサイトではなくてはならない要素です。

ボタンの用意の仕方はたくさんあります。フッターに置いたり、文章の途中に置いたり。

自分の考えだと、フッターに置くと、ページが縦に長いときに、ページ途中で戻れない。また、文章の途中だと読むのに邪魔。と思うので、ページの途中まで来ると出現するボタンが良いと思っています。

また、ふわっと出現させるのも、急にバンと出てくると読んでいる最中に気が散るので、さりげなく出すことで気が散りすぎない、かつ、気がつかせる、ので良いと思っています。

今回やりたかったこと

• ページの下方へ行くとふわっとページTOPへボタンを表示（フェードイン）
• ページの上方へ行くとふわっとページTOPへボタンを消す（フェードアウト）
• ボタンは画像で、ロールオーバーさせたい
• javascript, jqueryなどを読み込んでシンプルに

具体的な設置方法

sample.html　ヘッダ部にjqueryとpagetop.jsを読み込み

<link rel="stylesheet" href="hogehoge/css/sample.css">
<script src="hogehoge/js/jquery.js"></script>
<script src="hogehoge/js/pagetop.js"></script>

さらにbody部にボタンを配置

<p id="page-top"><a href="#top">ページ上部へ</a></p>

pagetop.js　本体の処理

$(function() {
    var topBtn = $('#page-top');
    topBtn.hide();
 
    $(window).scroll(function () {
        if ($(this).scrollTop() > 150) {//150の数字を変えるとスクロールの際にボタン出現する場所が変わります。
                topBtn.fadeIn();
            }
        } else {
                topBtn.fadeOut();
        }
    });
 
    topBtn.click(function () {
        $('body,html').animate({scrollTop: 0}, 500);//500の数字を変えるとフェードインアウトのスピードが変わります。お好みで。
        return false;
    });
});

今回使用している画像はは高さ62px×横62pxのボタンです。マウスオーバー用を上下に繋げています。

sample.css

#page-top {
    position: fixed;
    bottom: 5%;
    right: 5%;
    font-size: 70%;
}
#page-top a {
    display: block;
    text-decoration: none;
    padding-top: 62px;
    width: 62px;
    height: 0px;
    overflow: hidden;
    background: url(hogehoge/pagetop.png) no-repeat 0 0;//画像のURLを指定。
}
 
#page-top a:hover {
    background-position: 0 -62px;
}

IE6，7, 8だとフェードイン・アウト時に透過箇所が黒くなり、 アンチエイリアスにはならずジャギー（ギザギザ）が出てしまう場合があります。

その場合はそこはフェードイン・アウトは無しにします。

chrome, safari, firefox, IE9限定の機能です。

pagetop.js　IE6，7, 8でジャギーが目立つ場合

$(function() {
    var topBtn = $('#page-top');
    topBtn.hide();
 
    $(window).scroll(function () {
        if ($(this).scrollTop() > 150) {//150の数字を変えるとスクロールの際にボタン出現する場所が変わります。
            if(!jQuery.support.opacity){//IE6,7,8のみの処理
                topBtn.fadeIn(0);
            }
            else{
                topBtn.fadeIn();
            }
        } else {
            if(!jQuery.support.opacity){//IE6,7,8のみの処理
                topBtn.fadeOut(0);
            }
            else{
                topBtn.fadeOut();
            }
        }
    });
 
    topBtn.click(function () {
        $('body,html').animate({scrollTop: 0}, 500);//500の数字を変えるとフェードインアウトのスピードが変わります。お好みで。
        return false;
    });
});

ウェブ戦略にお悩みですか？

御社のWEB事業部となって、分析とデザインで集客から売り上げまで改善します！
デザインは2005年から。携わったHPは200件以上！