こんにちは。SaitoKouです。
Webサイトの中には、メニューの中のボタンもしくはリンクを押すと、クリックしたそのリンクの該当箇所にスクロールで移ってくれる機能がありますよね。これは「ページ内リンク」と言って、文字通り同じWebサイトのページに遷移したいときに使用します。
今回はこの「ページ内リンク」を実装する方法を書こうと思います。
目次
- スクロール無しで、画面遷移できるようにする。
- 画面がスクロールされるようにする。
- まとめ
1.スクロール無しで、画面遷移できるようにする。
まずは、リンクをクリックすると、設定した位置に移動するようにします。（今後これをジャンプと呼びます。
1.divタグを用意し、idを設定する
ボタン押下後の、ジャンプする場所の設定になります。
WordPressのブロックエディタで設定する場合には、「カスタムHTML」ブロックを用いてdivタグを作成するのがいいと思います。（ブロックエディタからコードエディタに変換して編集もできるけど、上記のほうが簡単。）
書く内容は以下です。
<div id="ここは好きなように設定"></div>
2.ボタン（もしくはリンク）を用意し、カスタムリンクに記述する。
まずはボタンを用意します。ボタン追加後、下の図の赤枠で示したマークをクリックすると、リンクが書けるようになります。
ここに、先ほど設定したidを、先頭に「#」をつけて記述します。
これでOK。これが完了すると、リンクをクリックすると、指定のidへジャンプするようになります。
2.画面がスクロールされるようにする。
このままでは、クリックした瞬間に、画面が切り替わるようにジャンプしてしまいます。これを、スクロールで移動しているようにアニメーションを追加します。このアニメーションはJavaScriptを追記して設定します。
JavaScriptへの追記は、header.phpのheadタグ内に追記します。
テーマファイルへ直接追記するので、子テーマを作ってそこへ編集しましょう。
子テーマの作り方はこちら↓
JavaScriptには以下の内容を記入します。
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$('a[href^="#"]').click(function() {
//ページ内リンク先を取得
var href= $(this).attr("href");
//リンク先が#か空だったらhtmlに
var hash = href == "#" || href == "" ? 'html' : href;
//設定したハッシュタグの位置を取得
var position = $(hash).offset().top;
//スクロール
$('body,html').stop().animate({scrollTop:position}, 500);
//リンクを無効化
return false;
});
});
</script>
これで、指定したアンカーにジャンプするようになります。実際に動かして試してみてください。
まとめ
ブログを書いている方は、目次などにこのスクロールでの繊維があると目次で選んだ箇所にすぐジャンプできるので読み手にやさしい作りになりますね！
ぜひ活用してください！
みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください！
WordPressデザインサービスは以下から承っております。
