WordPress でヌルッとスクロールさせるスクリプトを作ったった。
コピペでそのまんま使えますよ!

SPONSERD LINK

つか、このブログでもほとんどこのまんま使ってますよ!

スクロールを実装する

jQuery( function ( $ ) {
	$( 'a[href^=#]' ).click( function() {
		var speed = 1000;
		var href = $( this ).attr( "href" );
		var position = ( href == "#" ? 0 : $( href ).offset().top );
		$( "html, body" ).stop().animate( { scrollTop: position }, speed, "swing" );
		return false;
	});
});

リンク先が # の場合は、現在開いてるページのトップへスクロールする。

変数 speed でスクロールのスピードを調整できる。単位はミリ秒。

スクリプトをリンクする

下記は、WordPress のテーマのヘッダーの一部分です。

<html <?php language_attributes(); ?>>
<head>
<title><?php wp_title( ' | ', true, 'right' ); ?><?php bloginfo( 'name' ); ?></title>
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" media="screen" />
<?php wp_head(); ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script.js"></script>
</head>

ハイライトされている行が、スクリプト script.js を読み込んでいる部分です。
script.js は、テーマのフォルダのトップに保管されているとする。

注意点は

<?php wp_head(); ?>

の部分で JQuery を読み込んでいるので、その後にスクリプト script.js を読み込む。

ページ内へリンクする

記事やウィジェット、メニューにページ内のアンカーへリンクを貼ってテストしてみる。

ページのトップへヌルッと移動する

ヌルッとスクロールすれば成功だよ!

お疲れ様でした!