HTMLでは<a>要素のアンカーにidを指定することでそのidがある箇所までページ内移動（ジャンプ）が可能です。今回はスクロールアニメーションで目的の箇所まで移動するエフェクトをjQueryで実装します。
一瞬で移動する場合と比べてスクロールアニメーションでの移動は「それがページ内移動であることが把握しやすい」といった効果もあります。
HTML：idによるジャンプ先と指定方法
<a href="#apple">「apple」へ移動します。</a> ～～～～～～ <p id="apple">apple</p>
移動元のhref属性に移動先のidを指定します。
1行目の<a href="#apple">をクリックすると5行目の<p id="apple">まで移動しますが、これだけではアニメーションはありません。
jQuery：スクロールアニメーション
$(function(){
$("a[href^='#']").click(function(){
var target = $(this.hash);
var position = $(target).offset().top;
$('html,body').animate({scrollTop: position}, 400);
return false;
});
});
2行目：<a>要素のhref属性の値が”#”で始まる場合に実行。
3行目：自身のハッシュをtargetに代入。前述のHTMLの例では<a href="#apple">をクリックした場合、#appleの部分が変数に代入されます。つまり移動先のidが変数となります。
4行目：positionには移動先要素の縦位置が入ります。
5行目：positionの位置まで400ms（0.4秒）でスクロールアニメーションします。
jQueryの押さえておきたい書き方
a[href^='#']：属性と値の指定方法$(this.hash)：ハッシュ(#)offset()animate({変化}, 速度)
WordPressで使う場合の注意点
WordPressでjQueryを使うためにはいくつか気を付ける点があります。
次のページで詳しくまとめていますので参考にしてみてください。
