【WordPress】ページ内リンク・スムーズスクロールで止める位置を調整する方法

前回、ページ内リンクでスムーズスクロールさせる簡単な方法をご紹介させていただきました。

【WordPress】ページ内リンクでスムーズスクロールさせる方法2022年版

ただ、ホームページによっては、ヘッダー部分が上部に固定されている場合など、スクロール位置を調節しないとコンテンツの一部が隠れてしまうことがあります。

そこで今回は、前回同様スムーズスクロールで、止まる位置を調整する方法をご紹介させていただきます。

Contents

カスタムHTMLと追加CSSの設定

ワードプレスの場合は、固定ページなどの編集画面で、スクロールを止めたい箇所（リンク先）にカスタムHTMLブロックを追加して、以下のコードを入力してください（aタグに”anchor”というクラスを付け、アンカーIDを”link1”にしました）。

<a class="anchor" id="link1"></a>

そして、リンク元（クリック時に飛ぶ前）の要素にリンクの設定をします。ワードプレスの場合は、要素選択時に出てくるツールバーから、（－）をクリックして、先ほどのID名を設定します。このとき、ID名の前に「#」を付けてください。

グローバルメニューでページ内リンクの設定をする場合には、以下の通りです。

ワードプレスの場合、基本的に「外観」＞「メニュー」から、グローバルメニューの設定をします。

メニュー項目を追加で「カスタムリンク　▼」をクリックし、リンク先URLとリンク文字列を入力します。

リンク先URLは、先ほどの例だと「#link1」になります。リンク文字列は自由に決めてください。

次にCSSの追加になります。

こちらは、「外観」＞「カスタマイズ」をクリック、「追加CSS」をクリックし、

こちらのコードを記述します。

html {
  scroll-behavior: smooth;
}
a.anchor {
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}

html{scroll-behavior: smooth;}は、ホームページ全体をスムーズスクロールにするための設定です。

a.anchor{ }内のpadding-top、margin-topの数値（ピクセル数）で、スクロール位置の調整をしています。ここでは70px下にずれた位置で止まるように設定しています。

固定のヘッダーなどで、スクロール位置を調整したい場面は多いと思いますが、今回のようにカスタムHTMLと追加CSSで簡単に実現できますので、ご参考にしていただければと思います。