ページ内リンクをスムーズスクロールさせるjQueryプラグインを作ってみた。

今あるサイトに読み込むだけの簡単設計

巷にありふれている、ページ内リンクをスクロールさせるための、jQueryプラグインです。正直、「新しく作る必要なくね?」な印象は拭えません。

しいて言えば、今あるサイトに読み込ませるだけでページ内リンクが自動でスクロールするようになるため、初心者にやさしい設計だということです。

あと、最後に言い残すこととしては、「これなら自分にも作れそう」・・・と、思うことって、最初の一歩を踏み出すのにすごく大切なことだと思う。ってことだけです。

Downloaded 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を利用する場合は$だと動かないので注意が必要です。