待機遷移で別ページから1クリックでアンカーに遷移（WordPress + SWELL）

別ページのアンカーへ飛ぶ際に「クリック1回目で飛び先のトップが表示され、2回目でアンカー箇所にやっと飛ぶ」という現象がおきました。ネット検索すると、SWELLに限らずWordPressサイトでよく起こる問題とのこと。待機遷移することで別ページから1クリックでアンカーに遷移するようにカスタマイズした作業メモです。

ページが読み込まれた後に改めてアンカーの位置へジャンプさせるスクリプトの設定

「2回目のクリックでアンカー箇所に飛ぶ主な原因は、画像やコンテンツの読み込み(遅延読み込み)によって、ページ全体の高さが後から変わってしまい、ブラウザが計算した位置がずれることにあるようです。

強制的に位置を再計算させるスクリプトを使って、ページが読み込まれた後に改めてアンカーの位置へジャンプさせます。「外観」>「カスタマイズ」>「高度な設定」の「body終了直前に出力するコード」に、 以下を追記しました。

もう少しキビキビ動いて遷移先のトップで止まっている時間を短くしたいと感じますが、当サイトでは１クリックで確実にアンカーまで一気に遷移するスクリプト内の待ち時間は300ミリ秒あたりが最適のようです（0.3秒待ってからジャンプ（読み込み待ち））。ヘッダーの高さ分を100pxに設定しています。

<script>
window.addEventListener('load', function() {
    if (window.location.hash) {
        setTimeout(function() {
            var hash = window.location.hash;
            var target = document.querySelector(hash);
            if (target) {
                var pos = target.getBoundingClientRect().top + window.pageYOffset;
                window.scrollTo({
                    top: pos - 100,
                    behavior: 'smooth'
                });
            }
        }, 300);
    }
});
</script>

PCブラウザ（Firefox、Edge、Chrome、Brave）で遷移を確認

本サイトのトップページのH4見出し「検索、タグ一覧」には、HTMLアンカーとしてtag-partsを付けています。このアンカーをフローティングボタン「検索、タグ」に設定。

<a href="https://yokahiyori.com/#tag-parts"  class="my-custom-float-btn my-fix-circle-btn btn-page-c">
  <i class="icon-search"></i>
  <span>検索・タグ</span>
</a>

別ページから画面右側に配置のフローティングボタン「検索、タグ一覧」」をマウスで１クリックするとアンカー位置まで一気に遷移することを確認できました。
下記の動画でいったんページトップに遷移した後、待機してからアンカーの位置に遷移する様子が確認できます。

この動画はWindows11の機能を使ってEdgeでMP4動画を録画しました。ブラウザを開いた状態でキーボードの Windowsキー + Alt + R を押すと「録画バー」がポップアップするので●ボタンクリックで録画開始、■ボタンで停止。Windowsの ビデオ > キャプチャ フォルダにMP4形式で保存されます。

下記はMicrosoft Store「アニメーションGIF変換職人」アプリを使ってMP4動画からWebPアニメーションに変換したものです。