ジユウメモメモ

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

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からグーグルのサーバーのリンクをコピーする。

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

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

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

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

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

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

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

スポンサーリンク
この記事をシェアする