ページ内リンクをスムーズスクロールさせるjQueryプラグインを作ってみた。
今あるサイトに読み込むだけの簡単設計
巷にありふれている、ページ内リンクをスクロールさせるための、jQueryプラグインです。正直、「新しく作る必要なくね？」な印象は拭えません。
しいて言えば、今あるサイトに読み込ませるだけでページ内リンクが自動でスクロールするようになるため、初心者にやさしい設計だということです。
あと、最後に言い残すこととしては、「これなら自分にも作れそう」・・・と、思うことって、最初の一歩を踏み出すのにすごく大切なことだと思う。ってことだけです。
DOWNLOAD - jquery.scroller.d5.js
サンプル
このサイトでも使用しているので、このページのフッターにある「このページの先頭へ」というリンクで動作が確認できます。
簡単な使い方
<script type='text/javascript' src='jquery.js></script> <script type='text/javascript' src='jquery.scroller.d5.js></script>
head内でjQueryと共に読み込ませます。それだけで、aタグのhrefが#から始まる「ページ内リンク」が、自動的にスクロールするようになります。
がんばるさんの使い方
jQueryのプラグインって、head内で、CSSセレクタの書式で要素を取得して、メソッドを実行したりしますよね？今回は、プラグイン作成の勉強が目的だったので、そんな感じで、スクロールさせたい要素を取得して、scRoller()メソッドを呼び出すように設計してあります。
jQuery(function(){
jQuery("a[href^=#]").scRoller();
});
jsファイルの最下部で、メソッドを呼び出しています。デフォルトでは、#からはじまるaタグすべてをスクロールさせるようになっています。ここを変えれば、好きなものだけスクロールさせたりできます。スクロールさせたくないページ内リンクがある場合？に役立ちます。というか、そんな場合があるのかどうかは僕には不明ですが・・・。もちろん、この箇所をjsファイルから削除して、HTMLファイルのhead内に記述してもOKです。なんだかjQueryプラグインっぽくて、ドキドキしますよね。
$(function(){
$("a.innerlink").scRoller();
});
例えば、上記のように記述すれば、innerlinkというクラス名が付いたaタグのときだけスクロールするようになります。jQueryと$は同じ意味ですが、wordpressのjQueryを利用する場合は$だと動かないので注意が必要です。
