久々のjQueryの記事。
jQueryで、ページをスムーズに移動させる方法は、沢山ありますが、今回はこちらのチュートリアルにそってつくってみました。
どうやら、FAQを作るための物らしいけれど、今回は普通にページの移動として使わせてもらいました。
まずは、「Sourse」をクリックして、ダウンロードします。
zipファイルを解凍すると、ファイルが色々入っているのですが、その中の
js/jquery-scrollTo.js
が本体です。
まずは、ファイルを読み込みます。
<script type="text/javascript" src="jquery.js"></script> <script type="text/ecmascript" src="jquery-ui.js"></script> <script type="text/javascript" src="jquery-scrollTo.js"></script>
jQuery-uiは、ダウンロードされるフォルダーに一緒に入っているものは、1.7.2だけど、別に1.8でも動きました。
次に、htmlを記述します。
<ul id="questions"> <li id="q000"><a href="#a000">質問その1</a></li> <li id="q000"><a href="#a001">質問その2</a></li> </ul> <div id="a000"> … … </div> <div id="a001"> … … </div>
こんな感じです。最終的に、「質問その1」をクリックすると、<div id=”a000″>に、「質問その2」をクリックすると、<div id=”a001″>にスルスル移動する様な感じになります。
次に、実行するスクリプトを記述します。
<script type="text/javascript">
$(function() {
$("#questions > li").click(function() {
var qu = $(this).attr("id");
var an = "#" + qu.replace("q","a");
$.scrollTo(an, {duration: 800, axis:"y", onAfter:function(){
$(an).effect("highlight", {color: "#99c0e1"}, 2000); }
});
});
});
</script>
クリックすると、liのidを取得して、「q」を「a」に置換して、#を追加してます。
青字の部分が実行部分っぽいです。スクロールした後、該当箇所(divで囲ってある部分)を、#99c0e1の色でハイライトさせてます。
とりあえずはここまでで、ページのスルスルスクロールとハイライトは完成です。
