【所要時間5分】ページ内リンクにスムーススクロールを適用

更新


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

  1. スムーススクロールとは
  2. プラグインダウンロード
  3. アップロード
  4. </body>直前にjsファイルへのリンク
  5. 最後に

スムーススクロールとは

念のため。

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

プラグインダウンロード

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

inc2734/jquery.smoothScroll ・ GitHub
ZIPタブをクリックしてください。

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

アップロード

展開が終わったら、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

ページ内で気持ち良いスムーススクロールをするためのjQueryプラグイン作った。 | モンキーレンチ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です