パラメータ付きの同一ページ遷移するリンクでアンカーリンクを設定する方法です。
別ページですとパラメータ＋アンカーリンクで問題ないのですが、下記のように
<a href="./?id=111#section01">リンク</a> ×
とするとアンカーリンクが優先されてページ遷移が出来ません。
普通には出来そうもなかったのでjavascriptで処理とリンクに工夫を入れます。
<a href="./?id=111&s_id=section01">リンク</a>
アンカーリンクをパラメータにしてしまいます。
javascriptで
window.onload = function(){ // URLを取得 let url = new URL(window.location.href); // パラメータオブジェクトを取得 let params = url.searchParams; // getメソッド let s_id = params.get('s_id'); if(s_id !== ""){ let targetElement = document.getElementById(s_id); targetElement.scrollIntoView(); } }
と記述します。
内容的には
〇現在のURLを取得
〇パラメータを取得
〇パラメータから特定の値を取得（s_id）
〇取得した値のidまでスクロールする（scrollIntoViewを使用）
となります。
簡易的なもので動きはカクッとしますが、スムーズスクロールなどを組み合わせればよくなると思います。
尚、ターゲットまでに高さの可変や画像の遅延読込などがある場合は上手く動かないことがあります。
特定の処理や遅延処理などを入れる必要がある場合に注意してください。
コメント