jQuery: 固定表示されるボタンの作り方

コンテンツの多いページでは、画面上に「ページトップへ」戻るボタンがあると便利です。 今回は、右下に「ページトップへ」ボタンを作成し、クリックされた場合に、 ページ最上部へ戻るようにします。 動作サンプル、サンプルコード、コード解説の順番で記述しています。

動作サンプル

サンプルを別ページで開く

HTML


<div>
二人の若い紳士が、すっかりイギリスの兵隊のかたちをして、ぴかぴかする鉄砲をかついで、
白熊のような犬を二疋つれて、だいぶ山奥の、木の葉のかさかさしたとこを、
こんなことを云いながら、あるいておりました。<br>

（省略）

</div>

CSS


div {
    width: 200px;
    margin: 10px auto 0 auto;
    padding: 5px;
    border: 1px solid silver;
}
#page_top {
    position: fixed;
    right: 10px;
    bottom: 10px;
    display: block;
    background: navy;
    color: white;
    padding: 5px;
    border-radius: 3px;
    z-index: 99;
}

JavaScript


$(function(){
    // 固定ボタン追加
    var str = '<a href="javascript:void(0);" id="page_top">Page Topへ</a>'
    $('body').append(str);

    $('#page_top').on('click', function(){
        $('html,body').animate({'scroll-top': '0'}, 500);
    });
});

コード解説

固定ボタンのスタイル


#page_top {
    position: fixed;
    right: 10px;
    bottom: 10px;
    display: block;
    background: navy;
    color: white;
    padding: 5px;
    border-radius: 3px;
    z-index: 99;
}

固定ボタンのスタイル設定です。position: fixedにします。 表示場所や色、形等はご自分の好きなようにしてください。

固定ボタンを追加


// 固定ボタン追加
var str = '<a href="javascript:void(0);" id="page_top">Page Topへ</a>'
$('body').append(str);

body要素の最後尾にa要素を追加します。 a要素はクリックされても何もしないようにjavascript:void(0);を記述しています。

画面スクロール


$('#page_top').on('click', function(){
    $('html,body').animate({'scroll-top': '0'}, 500);
});

html要素、body要素に対してanimate()メソッドを実行します。 ブラウザによって動作が違うようなのでhtmlとbodyの両方を記述しておいた方が良いでしょう。

{'scroll-top': '0'}の部分は{scrollTop: '0'}と書いても同じです。

アニメーションではなく、一気にページトップへ戻りたい場合はscrollTop()メソッドを使うこともできます。 その場合は次のように記述します。


$('html,body').scrollTop(0);
jQuery入門