「ページトップへ戻る」ボタンを不要な時は隠すようにしてみた

このブログで使用しているWordPressテーマは便利でありがたい面も多いが、デザイン面ではなおしたいところがチラホラ。

特に前から気になっていたものが、画面右下に固定で表示される「このページの先頭へ」というボタン。
これこれ↓

画面が大きいPCで見ていれば気にならないのかもしれないが、画面が小さいPCだと結構邪魔。
しかも画面を開いた時点で表示されている意味がない。

そこで、画面をスクロールした時にだけ表示するようにしてみた。

実装は簡単。
（※jsの細かい仕様が変わったためか、他の方のブログを参考にしていたらうまく動かなくて思いのほか時間をかけてしまったが…）

１．jquery.scrollUp.jsをこちらからダウンロード

２．jquery.scrollUp.jsをサーバーにアップし、読み込む

もちろんjqueryも読み込む必要あり。
head内に

<script type="text/javascript" src="/js/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/jquery.scrollUp.js" charset="utf-8"></script>

ってな感じ。

３．以下のスクリプトをhead内に記述

<script>
$(function () {
    $.scrollUp({
scrollText: '',
});
});
</script>

このjsでは、デフォルトのままだと、
idがscrollUpのaタグが差し込まれ、アンカーテキストは “Scroll to top” となる。
今回はテキストは何も入れたくなかったので上の記述で空の文字を入れている。

４．CSSで表示場所や形態を指定

当サイトでは以下のように記述している。お好みでお好きなように。

#scrollUp{
	right: 15px;
	bottom: 0;
	width: 15px;
	display: block;
	padding: 22px 20px;
	border: 3px solid #fff;
	border-bottom: 0;
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-webkit-border-top-left-radius: 20px;
	-moz-border-radius-topright: 20px;
	-moz-border-radius-topleft: 20px;
}

* html #scrollUp{ display: none; }

#scrollUp:link, 
#scrollUp:visited{
	background: url(./images/common/bg-pagetop.png) 16px 21px no-repeat #184921;
}

#scrollUp:hover, 
#scrollUp:active{
	background-color: #59493f;
}

 
以上で動くはず。

その他、いろいろなオプションも用意されている。
デモも含めてオフィシャルサイトでご確認いただきたい。