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を使うためにはいくつか気を付ける点があります。
次のページで詳しくまとめていますので参考にしてみてください。