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

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

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

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

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

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

header.phpに記述を追加する

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

<script>
//スムーズスクロール
jQuery(function(){
   jQuery('a[href^="#"]').click(function() {// # クリック処理
      var speed = 400; //スクロール速度ミリ秒
      var href= jQuery(this).attr("href"); // アンカーの値取
      // 移動先を取得
      var target = jQuery(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;// 移動先を数値で取得
      // スムーススクロール
      jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});
</script>

//スムーズスクロール

jQuery(function(){

jQuery('a[href^="#"]').click(function() {// # クリック処理

var speed = 400; //スクロール速度ミリ秒

var href= jQuery(this).attr("href"); // アンカーの値取

// 移動先を取得

var target = jQuery(href == "#" || href == "" ? 'html' : href);

var position = target.offset().top;// 移動先を数値で取得

// スムーススクロール

jQuery('body,html').animate({scrollTop:position}, speed, 'swing');

return false;

});

</script>

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

var speed = 400; //スクロール速度ミリ秒

1	var speed = 400; //スクロール速度ミリ秒

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

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

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

/* wp_head(); で Wordpressの jQuery を読み込む? */
function load_script(){
    wp_enqueue_script('jquery');
}
add_action('init', 'load_script');

/* wp_head(); で Wordpressの jQuery を読み込む? */

function load_script(){

wp_enqueue_script('jquery');

}

add_action('init', 'load_script');

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

まとめ

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

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

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