当サイトは通販サイト・外部Webサービスへのリンクの一部にアフィリエイト広告を使用しています
jQuery Page ScrollerとCSSスプライトでページ内スクロールボタンを作る方法
2012年12月4日
自分用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プロパティを記述する。
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;
}