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

HTML：id属性と<a>要素によるページ内移動の指定方法

<a href="#apple">「apple」へ移動します。</a>

～～～～～～

<p id="apple">apple</p>

<a>要素（移動元）のhref属性に移動先のidを指定します。
上記の例では、1行目の<a href="#apple">をクリックすると5行目の<p id="apple">まで移動します。

移動の際のアニメーション効果はJavaScript等で行います。

JavaScriptによるスクロールアニメーション

JavaScriptのみで実現する方法です。

window.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
    anchor.addEventListener('click', e => {
      e.preventDefault();
      const target = document.querySelector(anchor.hash);
      const targetOffsetTop = window.scrollY + target.getBoundingClientRect().top;

      window.scrollTo({
        top: targetOffsetTop,
        behavior: 'smooth',
      });
    });
  });
});

ソースコード読み解き

1行目：HTML読み込み後に処理を開始。
2行目：href属性の値が#で始まる全ての<a>要素に対してforEach()で処理を行う。
3行目：<a>要素がクリックされたら以後の処理を実行。
4行目：デフォルトの動作をキャンセル。
5行目：anchor.hashで取得できるhref属性の#に続く文字列を元に移動先の要素を取得。
6行目：現在位置と移動先要素の位置からスクロール量を計算。
8行目：計算したスクロール量を指定してスクロール実行。

jQueryの場合のスクロールアニメーション

jQueryを使う場合はこちら。

$(function(){
  $("a[href^='#']").click(function(){
    const target = $(this.hash);
    const 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秒）でスクロールアニメーションします。

押さえておきたい書き方

• a[href^='#']：属性と値の指定方法
• $(this.hash)：ハッシュ(#で始まるhref属性の値)
• offset()：要素の位置を取得
• animate({変化}, 速度)

WordPressで使う場合の注意点

WordPressでjQueryを使うためにはいくつか気を付ける点があります。
次のページで詳しくまとめていますので参考にしてみてください。

---