さぁ!検索しよう!

ある程度スクロールすると画面右下に出現し、クリックすると瞬時にページ先頭へ戻るボタンの作り方です。

DEMO

HTML

<div id="container">
    <header id="header">
        header
    </header>
    <div id="content">
        contents
    </div>
    <footer id="footer">
        footer
        <div id="backtotop">
            <a href="#header">TOP</a>
        </div>
    </footer>
</div>

ヘッダーから始まり、続くコンテンツ、フッターがコンテナで囲まれているマークアップです。

フッターの子要素にボタンがあり、このボタンをjQueryで操作します。

CSS

* {
    font-family: 'Raleway', sans-serif;
    font-size: 30px;
    text-align: center;
}

#container {
    width: 500px;
    margin: 0 auto;
}

#header {
    background-color: #A18E5C;
    color: #fff;
    width: 100%;
    height: 100px;
    line-height: 100px;
}

#content {
    background-color: #E3DECC;
    color: #292929;
    width: 100%;
    height: 600px;
    line-height: 600px;
}

#footer {
    background-color: #A18E5C;
    color: #fff;
    width: 100%;
    height: 100px;
    line-height: 100px;
}

#backtotop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9000;
    width: 70px;
    height: 70px;
}

#backtotop a {
    color: #fff;
    width: 70px;
    height: 70px;
    text-decoration: none;
    display: block;
    line-height: 70px;
    font-size: 14px;
    background-color: #333333;
    border: 1px solid #FFF;
    border-radius: 50%;
}

ボタンを固定表示するため、ボタンのボックス(#backtotop)にはposition:fixed;を指定しています。

ボタン本体(#backtotop a)はブロック要素にし、border:radius:50%;で円形にしています。

jQuery

$(function() {
    var topBtn = $('#backtotop');

    topBtn.hide();

    $(window).on('scroll', function() {
        if ($(this).scrollTop() > 200) {
            topBtn.fadeIn();
        } else  {
            topBtn.fadeOut();
        }
    });    
    topBtn.on('click', function() { 
        $('*').animate({
            scrollTop: 0
        }, 700, 'easeOutQuint');
        return false;  
    });
});

.hide()

初期状態では、ボタンは非表示にしています。

topBtn.hide();

$(window).on(‘scroll’, function () {…}

$(window).on('scroll', function () {...}は、スクロールをしたときの処理です。

if ($(this).scrollTop() > 200) {…}

スクロール量が200pxを超えるとボタンが表示され、200px未満となれば非表示にします。

if ($(this).scrollTop() > 200) {
    topBtn.fadeIn();
} else  {
    topBtn.fadeOut();
}

topBtn.on(‘click’, function() {…}

表示されたボタンをクリックすると、scrollTop: 0で画面がページの先頭に戻ります。

topBtn.on('click', function() { 
    $('*').animate({
        scrollTop: 0
    }, 700, 'easeOutQuint');
    return false;  
});

以上で、クリックするとページの先頭へ素早く戻る「TOPへ戻るボタン」を終わります。