冬言響 / 日記

「ページトップへ」

「もっと読む」でチョーシ乗ってずんずん画面を下にスクロールしてたらそこから一番上へ戻るのがしんどくなってきたので(スクロールバー使えば良いんだけど)、これまたよくある「ページトップへ戻る」ボタンをこさえてみた。

var objToPageTop = $("<div />");
$("body").append(objToPageTop);
objToPageTop.text("ページトップへ")
            .css({"position":"fixed", "z-index":"100", "bottom":"10px", "right":"10px",
                  "background":"#666", "opacity":"0.5", "padding":"5px 10px", "border":"solid 1px #FFF", "border-radius":"5px", "color":"#FFF"})
            .hide()
            .hover(function() {
    $(this).css({"cursor":"pointer", "opacity":"1"});
    },
function() {
    $(this).css("opacity", "0.5");
    });
$(window).scroll(function() {
    if($(this).scrollTop() > 100) {
        objToPageTop.show("slow");
        }
    else {
        objToPageTop.hide("slow");
        }
    });
objToPageTop.click(function() {
    $("html").animate({"scrollTop": "0"});
    objToPageTop.css("opacity", "0.5");
    });

objToPageTop という名前で div 要素を生成して body 直下の一番最後に追加。どうせ表示位置はスタイルシートで設定するからどこでも良いのだけど。position: fixed でウィンドウ右下で z-index は一応 100 に。あとは色とか。基本は半透明。そして初期状態では非表示に。

hover() でマウスオーバー時のイベント。透過を無しにしてマウスカーソルをポインタに。外れたら透過を戻す。

初期状態は非表示だけどウィンドウをスクロールしたら表示する。$(window).scrollTop が 100 を超えたら表示。100 をきったら非表示。

そして最後にクリックしたら一番上へスクロール。ただスクロールするだけなら $(this).scrollTop(0) で済むのだけどちょっとアニメーションしてみた。

元の HTML はいじってないのでこのスクリプトだけコピペすれば他所の環境でも動く、だろか。header 辺りに ID 振っといて <a href="#header">ページトップへ</a> みたいなリンクアンカーをページ最下部に置いといてスクリプト非対応環境でも一番下から一番上へは行けるようにしといてそのうえで jQuery で表示位置とか挙動とかいじっても良かったかも知らんけど、縦方向へスクロールする視覚系 UA のためのものを HTML に直置きするよかスクリプトで要素から生成ってのをやってみたかったので。

例によって概ね動くんだけどたまに半透明になってないことがあるんだよな。パターンがちょっと良く判らん。なぞ。