初心者でもプラグインなしでスムーズスクロールを実装する方法

コーディング中のPC画面






トップに戻るボタンや、目次から見出しへ飛ぶようなページ内リンクって大抵スクロールで変わりますよね。あれってテンプレートを使わない場合は自分で設定する必要があるので「面倒だからプラグイン使うかぁ」と思いがちですが、意外に簡単に設定ができるんです。

今回は初心者でもできる、プラグインを使わずにページ内リンクをスクロールさせる方法を紹介したいと思います。

jQueryを使ってスムーズスクロール

スムーズスクロールを実装するにはjQueryを使うのですが、WordPressの場合は通常のjQueryと違って、コードの頭についている「$」を「jQuery」に変えないとjQueryが動いてくれないので注意してください。

header.phpに記述を追加する

header.phpの <?php wp_head(); ? > の後に以下の記述を追加します。

スクロールスピードについて

スクロールスピードは var speed の値で調整しますので、任意の数値を入れて調整してください。数値を減らすとスクロールのスピードが速くなり、増やすと遅くなります。「speed = 1000」が1秒なので、設定の参考にしてください。

jQuery.jsが読み込まれていない場合

大抵、WordPressは大元のjQueryが自動に読み込まれるので必要ないと思いますが、もしjQueryが読み込まれてない場合は function.php に以下の記述を追加してください。

この記述はjQuery.jsの読み込みと同時に、他のプラグインが利用するjQueryとの共存を調整してくれるそうです。

まとめ

WordPressでサイトに機能を追加する場合、すぐにプラグインの導入を考えてしまいそうですが、少し有効化するのを待ってみませんか。
WordPress初心者にとって、プラグインは便利すぎて宝箱のようにも思えますが、動きや設定の原理などが不明のまま利用する事になるので、WEBのスキル上達には向いてないと思います。

プラグインがトラブルの元になる事もあるので、jQueryで解決できる事であればjQueryに任せた方が安心ですしね。

「初心者でもプラグインなしでスムーズスクロールを実装する方法」でした。







コーディング中のPC画面