【WordPress】コピペでOK!無料テーマでも目次リンクにぬるぬる動くスクロールを実装できる!

CMS

アンカーリンクの遷移先にヌルっとスクロールしているような動きで到着する方法を紹介します。

有料テーマにはデフォルトで設定されているものが多いですが、無料テーマでも簡単に実装できるので試してみてください!

ちなみに当ブログで使用している無料テーマ「Coccon」にも実装されていなかったので、追加してみました。

実際の動きは下のデモか目次をクリックして確認してみてください!

今回紹介する方法は目次に限らずアンカーリンク全てに反映されます。

DEMO

とりとん
とりとん

早速コードを確認してみよう!

コピペ用コードと簡単な解説

JavaScript
jQuery(function(){
	jQuery('a[href^="#"]').click(function(){
		var speed = 800;
		var href = jQuery(this).attr("href");
    	var target = jQuery(href == "#" || href == "" ? 'html' : href);	
    	var position = target.offset().top - 100;
    	jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
    	return false;
   });
});
とりとん
とりとん

簡単にソースの説明だけしときますー

speed:スクロールにかけるスピード(ms)、秒数を設定しているので距離が延びるほど早くなる。

position:スクロール後の位置、これを設定しないと画面のギリギリ一番上になるようスクロールするので見やすい位置に調節しましょう!

WordPressでJavaScriptを記述する方法

カスタムJavaScriptに追記しても動きますが、それでは対象の記事のみにしか反映されないので、テーマを使用している場合は、子テーマのJavascript.jsに追記しましょう。

追記場所がわからない方は下の記事も参考にしてみてください!

cssの記述方法を初心者向けに書いた記事ですが、今回は「ブログ全体に適用させる場合」のスタイルシートではなくJavascript.jsに記述すればOKです。

まとめ

今回紹介した「アンカーリンクのスムーススクロール」は細かいカスタマイズにはなりますが、

無料テーマでもコピペするだけで簡単に有料テーマと同じようにこだわることができちゃうので、ぜひやってみてください!

地味にこういう細かいところにどこまでこだわるかがサイトの良し悪しに直結しますよ^^

簡単なのでぜひやってみてください〜

当ブログは、コピペ用のコードを紹介していますが、直接のご依頼も受け付けています♪

こういうデザインにしたい!

試してみたけどできなかった・・

などの簡単な修正からも受け付けていますので、TwitterDMお問い合わせフォームよりお気軽にご連絡ください^^

とりとん
とりとん

最後まで読んでいただきありがとうございました!


\ ぽちっと応援お願いします♪ /
ブログランキング・にほんブログ村へ人気ブログランキングへ
タイトルとURLをコピーしました