スクロールすると「ページトップへ」ボタン出現

一定の量をスクロールすると、右下に「PageTop」ボタンが出現。
クリックすると、ぬるっと一番上まで戻ってくれるボタンを設置します。

Googleが用意したjQueryを読み込む

<head></head>の中に以下を追加。

本体をDLして自分でアップロード・読み込んでもいいけど、グーグルさんが用意したjQueryを読み込んだほうが速いです。
（ネットサーフィンをしてると大体コレを踏んでいて、パソコン内にキャッシュが残っていることが多いので）

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

jQuery

<head></head>の中に以下を追加。

6行目の「600」は、600pxスクロールしたら「ページトップ」が出現。
13行目の「500」は、上部まで戻る「スピード」です。

少なくすると早く、多くすると遅くなります。

HTML

<script type="text/javascript">
$(function() {
    var pageTop = $('.page-top');
    pageTop.hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 600) {
            pageTop.fadeIn();
        } else {
            pageTop.fadeOut();
        }
    });
    pageTop.click(function () {
        $('body, html').animate({scrollTop:0}, 500, 'swing');
        return false;
    });
});
</script>

HTML

上部に戻るボタンです。

CSSで位置を固定するので、どこに書いてもよいです。

HTML

<a href="#" class="page-top">PAGE TOP ▲</a>

CSS

CSSで装飾します。

「position: fixed;」絶対位置（スクロールしても位置固定）
「bottom: 60px;」下から60pxに配置
「right: 40px;」右から40pxに配置

あとは適当に。
角を丸くしたり半透明にしたりすると、カッコイイです。
（下記は当サイトのpage-topと同じCSSです）

CSS

.page-top {
    position: fixed;
    bottom: 60px;
    right: 40px;
    padding: 10px;
    background: #7e7a7a;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    font-size: 12px;
    -ms-filter: "alpha(opacity=80)";
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}

以上でページトップに戻るボタン設置は終了です。

jQueryを外部ファイルにしたい場合

<head>の中にごちゃごちゃ書きたくない！

という方は、jQueryを「外部ファイル」にして最後に読み込みましょう。

jsファイル

$(function() {
    var pageTop = $('.page-top');
    pageTop.hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 600) {
            pageTop.fadeIn();
        } else {
            pageTop.fadeOut();
        }
    });
    pageTop.click(function () {
        $('body, html').animate({scrollTop:0}, 500, 'swing');
        return false;
    });
});

<head>の中に記述したjQueryを「メモ帳」に貼り付ける。
（このとき、最初と最後の<script type="text/javascript"></script>は不要。）

貼り付けたら、拡張子を「.js」にして保存する。
ファイルの種類の中のプルダウンに「.js」はないので、ファイル名に直接入力しちゃえばOK。

今回は「page-top.js」で保存したとします。
（文字化けしたり動かない場合は、保存するときの「文字コード」に問題あるかも。よく分からないけど私は「UFT-8」で保存しています）

「page-top.js」を呼び出す記述をします。

HTML

<script type="text/javascript" src="page-top.js"></script>

読み込むのは最後でいいので、記述は</body>の直前でOK。