HTMLとCSSのみで表現されたページ内リンクをクリックすると、一瞬にして目的地に連れて行ってくれますが、ちょっと味気ないですよね。このたびjQuery pluginを使ってスムーススクロールを実現してみました。jQueryやJavascriptの知識なしでも簡単です。

スムーススクロールとは

念のため。

このページの箇条書きメニューのように、リンクをクリックしたときに目的地まで、空を飛んで移動している感じで移動する演出のことです。

プラグインダウンロード

まず、プラグインをダウンロードします。

[img-link url=”https://github.com/inc2734/jquery.smoothScroll” title=”GitHub – inc2734/jquery.smoothscroll: スムーススクロールでページ内移動するためのプラグイン。”]

ダウンロードしたらすべて展開してください。

アップロード

展開が終わったら、jquery.SmoothScrollフォルダーを探してください。その中に、jquery.SmoothScroll.jsがあることも確認してください。

次に、サーバーのドメイン直下にjsフォルダーを作ってください。

そして、jsフォルダーの直下にjquery.SmoothScrollフォルダーごとアップロードしてください。

ドメインルートからのjquery.SmoothScroll.jsへの絶対パスは、/js/jquery.SmoothScroll/jquery.SmoothScroll.jsとなります。

</body>直前にjsファイルへのリンク

あとは、</body>直前にjsファイルへのリンクを設置すればスムーススクロールが実現できます。

WordPress Twentytwelveテーマの場合

アップロードが済んだら、footer.phpの</body>の直前に、以下を挿入します。

<script type="text/javascript" src="/js/jquery.SmoothScroll/jquery.smoothScroll.js"></script>

上記以外の場合

</body>の直前に、以下を挿入します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.SmoothScroll/jquery.smoothScroll.js"></script>

※その後、テーマファイルのfunction.phpにてwp_enqueue_script関数を使って、リンクを設定し直しました。

最後に

@web_shufuは、jQueryやJavascriptの知識が乏しくただいま勉強中です。

jQuery pluginというと難しく感じるのですが、スムーススクロールに関してはjQueryやJavascriptの知識なしで簡単に導入できました。

食わず嫌いだった人も是非チャレンジしてください。

Special Thanks

[img-link url=”http://2inc.org/blog/2012/02/14/1233/” title=”ページ内で気持ち良いスムーススクロールをするためのjQueryプラグイン作った。 – モンキーレンチ”]