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プラグイン作った。 – モンキーレンチ”]