スムーズスクロール

<a href=”#NAME”>

<a name=”NAME”>

でページ内の特定の位置に移動させる時に、クリックした瞬間にそのNAMEの場所に瞬間移動する動作が気持ち悪いなあと思っていたので、スムーズスクロールさせる方法はないかな？と思っていたら方法がありました。

①functions.phpに書き込む

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

<?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>

参照

• WordPress で Smooth Scroll (スムーススクロール)

②プラグインを使う

「Easy Smooth Scroll Links」

プラグインで一発でした！

インストールして有効化したらすぐにスムーズスクロールになります！

PHPをいじらなくてもあっという間に実現できるなんてプラグイン様々です！

ありがとうございます(^o^)／