スクロールアニメーションでページ内移動を行う【jQuery】

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


タイトルとURLをコピーしました