HTMLでは<a>要素のアンカーにidを指定することでそのidがある箇所までページ内移動（ジャンプ）が可能です。今回はスクロールアニメーションで目的の箇所まで移動するエフェクトをJavaScriptまたはjQueryで実装します。
一瞬で移動する場合と比べてスクロールアニメーションでの移動は「それがページ内移動であることが把握しやすい」といった効果もあります。
PR
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行目：計算したスクロール量を指定してスクロール実行。
querySelectorAll()で取得できるNodeListオブジェクトは配列と同様にforEach()が使えます。
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を使うためにはいくつか気を付ける点があります。
次のページで詳しくまとめていますので参考にしてみてください。
PR
