スクロールすると自動的にトップへ戻るボタンがでてくるjQueryプラグインを作りました。

最近よく目にする、ページをスクロールしていくと出てくる「トップへ戻るボタン」をjQueryプラグイン化したので公開します。

ダウンロード

GitHubで公開しています。

使い方

プラグイン読み込み

下記のコードを記述してjQueryとプラグインを読み込みます。head要素の中とかが良いと思います。

<link rel="stylesheet" type="text/css" href="/PATH/TO/jquery.scrollButton/jquery.scrollButton.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/PATH/TO/jquery.scrollButton/jquery.scrollButton.js"></script>

設定の記述

head要素の中などに、位置や表示文字などの設定を記述します。

<script type="text/javascript">
jQuery( function( $ ) {
	$('body').scrollButton( {
		duration  : 200, // フェードのスピード
		offset    : 20,  // 右下からの位置
		startPosY : 1000, // 何pxスクロールしたら表示するか
		string    : '↑', // ボタン内の文字
		target    : '#container', // リンク先アンカー名
		theClass  : 'fadeTopBtn'  // ボタンに付与するクラス
	} );
} );
</script>

上記の設定はデフォルト値です。そのままで良い場合は$(‘body’).scrollButtton()で実行できます。

出力されるコード

上記の設定を記述すると、下記のコードが</body>の直前に出力されます（
target = #container、string = ↑、fadeTopBtn　の場合）。

<div id="fadeTopBtn" class="fadeTopBtn"><a href="#container">↑</a></div>

CSSでデザインを調整

付与するclassの指定を得にしていない場合は「fadeToBtn」というclassが付与されます。デフォルトのCSSでは、その「fadeToBtn」というclassにスタイルがあたるようにしています。

/* jquery.scrollButton.css */
.fadeTopBtn a {
	background-color: #000;
	display: block;
	padding: 10px 15px;
	color: #fff;
}

異なるデザインにしたい場合はこのCSSを上書きするか、別のclassを付与するように設定して、オリジナルのCSSを適用します。また、jsの中で強制的に設定されるCSSもありますのでご注意ください。

/* jquery.scrollButton.js */
#fadeTopBtn {
	opacity: 0; /* startPosYを超えると0.8に */
	position: fixed; /* IE6, 7, 8の場合はabsolute */
	right: 20px; /* offsetで指定した値 */
	bottom: 20px; /* offsetで指定した値 */
}

ダウンロード

GitHubで公開しています。

おまけ

同じく僕が作成したjQueryプラグイン「jquery.smoothScroll.js」と合わせて使うと、ボタンをクリックしたときにスムーズにスクロールするようになります。おすすめです。

IE対策とか

ボタンを右下に固定表示するためには、CSSで「position: fixed」すれば良いのですが、IE6, 7, 8ではposition: fixedが効きません。そこで、IE6, 7, 8ではposition: fixedではなく、スクロールするたびに位置を右下に動かして、固定されているようにみせかけています。

詳細はコードをご確認いただければ。