ジユウメモメモ

気になるガジェットや映画のはなしをメモメモ

3パターンのアイコンを一つの画像にまとめる

jQuery Page ScrollerとCSSスプライトでページ内スクロールボタンを作る方法

 自分用Web制作メモ。よくあるWebページの下部に配置されている「トップへ戻る」ボタンの作り方。

jQueryとjQuery Page Scrollerの<script>タグを記述する

 ページ内のスムーズスクロールにはcoliss.comさんで配布されているjQueryプラグインの「Page Scroller」を利用する。

coliss.com:[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト-Page Scroller ver.3

 <head>タグ内にjQueryへのリンクと、coliss.comさんからダウンロードしたjquery.page-scroller-(バージョンナンバー).jsのリンクを記述する。

jQueryのタグはScriptSrc.netからグーグルのサーバーのリンクをコピーする。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../scripts/jquery.page-scroller-308.js" charset="utf-8"></script>

<a id=””>でスクロールの固定位置を記述する

スクロールで移動させた際の固定位置を<a id=””>で記述する(例:”TOP”)。

<body>
<a id="TOP"></a>
<div id="container">

リンクボタンに<a id=””>で指定したID名を指定する。

<div class="linktotop">
<a href="#TOP"><span>ページトップに戻る</span></a>
</div>

CSSスプライトでボタンアイコンを表示させる

<a>タグを囲むDIVのbackground-imageに「a」「a:hover」「a:active」で使用するアイコン画像を一つにまとめた画像を指定して、それぞれのbackground-positionプロパティを記述する。

3パターンのアイコンを一つの画像にまとめる

CSSスプライトの例。70×70ピクセルのアイコン3つを一つにまとめて、CSSのbackground-positionをずらして利用する。

.linktotop{
	width:70px;
	height:70px;
	float:left;
	margin-top:42px;
	margin-left:26px;
}

.linktotop a{
	width:70px;
	height:70px;
	display:block;
	background-image:url("img/linktotop.png");
	background-position:0px 0px;
}

.linktotop a:hover{
	background-image:url("img/linktotop.png");
	background-position:0px -70px;
}

.linktotop a:active{
	background-image:url("img/linktotop.png");
	background-position:0px -140px;
}

.linktotop a span{
	display:none;
}
スポンサーリンク
この記事をシェアする