アンカーリンクの遷移先にヌルっとスクロールしているような動きで到着する方法を紹介します。
有料テーマにはデフォルトで設定されているものが多いですが、無料テーマでも簡単に実装できるので試してみてください！
ちなみに当ブログで使用している無料テーマ「Coccon」にも実装されていなかったので、追加してみました。
実際の動きは下のデモか目次をクリックして確認してみてください！
今回紹介する方法は目次に限らずアンカーリンク全てに反映されます。
早速コードを確認してみよう！
コピペ用コードと簡単な解説
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です。
まとめ
今回紹介した「アンカーリンクのスムーススクロール」は細かいカスタマイズにはなりますが、
無料テーマでもコピペするだけで簡単に有料テーマと同じようにこだわることができちゃうので、ぜひやってみてください！
地味にこういう細かいところにどこまでこだわるかがサイトの良し悪しに直結しますよ＾＾
簡単なのでぜひやってみてください〜
当ブログは、コピペ用のコードを紹介していますが、直接のご依頼も受け付けています♪
こういうデザインにしたい！
試してみたけどできなかった・・
などの簡単な修正からも受け付けていますので、TwitterのDMかお問い合わせフォームよりお気軽にご連絡ください＾＾
最後まで読んでいただきありがとうございました！
